javascript for循环里面的settimeout执行问题

JavaScript027

javascript for循环里面的settimeout执行问题,第1张

循环是在瞬间完成的，也就是在瞬间启动三个计时器（时间间隔不会超过1毫秒），就好像发令枪响，三个人同时起跑。Javascript的计时器无法精确到8毫秒以内（不记得哪里看到了，也许随着平台改进会有所提升，但别指望能区分1-2毫秒），因此三个alert同时执行可能出现先后。

这与你循环中直接调用alert不同。因为alert会暂停for循环，等关闭alert后执行下面代码。

最好设置不同时值，间距大于10毫秒。你试试这样写

<script>

function testAnonymous() {

   var aa = 0

   var bb = 1

   for(var i = 0 i < 3 i++) {

      aa++

      bb++

      setTimeout('alert('+aa+')',1000+aa*10)

      //setTimeout(function(){return testDisplay(aa,bb)},1000)

    }

}

testAnonymous()

</script>

不到万不得已、山穷水尽的地步，请尽量不要在循环中做延迟处理，因为这会造成整个网页都卡住甚至崩溃，应该尽量利用定时器或计时器去解决。

比如下面这个for循环是依次显示0到9这十个数字，由于未做延迟处理，整个过程是瞬间完成的：

<script>

for(var i=0i<10i++){

document.querySelector("#test").innerHTML+=i+" "

}

</script>如果要实现每隔1秒显示一个数字，则这样：

<script>

var i=0

setTimeout(function x(){

document.querySelector("#test").innerHTML+=i+++" "

if(i<10)setTimeout(x,1000)

},1000)

</script>

var items = document.querySelectorAll('#list>li')

for (var i=0 i<items.length i++) {

var item = items[i]

setTimeout(function(){

item.style.backgroundColor = 'red'

},5)

}