JS异步一错题

62 阅读 0 评论 41 点赞

我是靠谱客的博主合适麦片，最近开发中收集的这篇文章主要介绍JS异步一错题，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

现有如下html结构

<ul>

<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标签，哪一个选项是正确的运行结果（）?

依次弹出1，2，3，4

依次弹出0，1，2，3

依次弹出3，3，3，3

依次弹出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！