for循环遍历如何延时执行

  如要遍历一个数组,for语句要如何延时输出数组中的项目,一般情况下想当然都会这样写

<div id="dv"></div>
<script>
    var arr = [1, 2, 3, 4, 5];
    for (var i = 0; i < arr.length; i++) {
        setTimeout(function () {
            document.getElementById('dv').innerHTML += arr[i] + '<br>';
        }, 3000);
    }
</script>

  上面的代码将会在3秒后同时显示5行undefined出来,为什么会出现这种情况。

1)同时显示,是因为setTimeout并不会挂起其他代码运行,for循环中几乎瞬时完成遍历,同时启动了5个计时器,然后3s后基本是同时执行了回调函数。

2)出现undefined设计到闭包,for循环后i已经变为arr.length,5,执行setTimeout回调时i为5,所以arr[5]为undefined,闭包相关看这个:JavaScript 闭包

  要想延时输出数组项,应该递归调用setTimeout,而不是for语句体中同时启动计时器。

 

  延时遍历数组代码如下

<div id="dv"></div>
<script>
    var arr = [1, 2, 3, 4, 5];
    function delayEachArray(delay, arr, index) {
        if (index == undefined) index = 0;
       document.getElementById('dv').innerHTML+=arr[index]+'<br>';
        index++;
        if (index < arr.length) setTimeout(function () { delayEachArray(delay, arr, index); }, delay);
        else document.getElementById('dv').innerHTML +=  '数组遍历结束<br>';
    }
    delayEachArray(3000, arr);
</script>

 



原创文章,转载请注明出处:for循环遍历如何延时执行
评论(0)Web开发网
阅读(193)喜欢(0)不喜欢(0)JavaScript/Ajax