现有如下html结构 <ul> <li>click me</li> <li>click me</li> <li>click me</li> <li>click me</li> </ul> 运行如下代码: var elements=document.getElementsByTagName('li'); var length=elements.length; for(var i=0;i<length;i++){ elements[i].onclick=function(){ alert(i); } } 依次点击4个li标签,哪一个选项是正确的运行结果(4,4,4,4)?
这里考的是JS的运行机制!
事件(click,focus等等),定时器(setTimeout和setInterval),ajax,都是会触发异步,属于异步任务;
js是单线程的,一个时间点只能做一件事,优先处理同步任务;
按照代码从上往下执行,遇到异步,就挂起,放到异步任务里,继续执行同步任务,只有同步任务执行完了,才去看看有没有异步任务,然后再按照顺序执行!
这里for循环是同步任务,onclick是异步任务,所以等for循环执行完了,i变成4了,
注意:这里因为i是全局变量,最后一个i++,使得i为4(后面的onclick函数,最后在循环外面执行,不受i<length限制);
所以for循环每执行一次,onclick事件函数都会被挂起一次,共4次; for循环结束后,点击事件 触发了4个onclick函数,接着输出4个4!