JS定时器和for循环搭配使用的一些问题

JS定时器和for循环搭配使用的一些问题

某天准备根据所学JavaScript知识，制作一个评教助手的脚本。本以为制作过程会非常顺利，结果遇到了这个坑，最终在沸点同学的帮助下，才得以解决。

需求功能

需要在for循环中，每进行一次操作后等待三五秒操作进行完成后，再去更新i的值，进行下一次操作

问题发现与解决

当时对每个列表中的元素操作都已经写好，但是每个操作都会有一定的网络延时，所以希望能在每轮操作结束后，等待3秒再更新数组指针i，从而完成数组便历。

$("input[data-dyf$='100']").attr("checked",true);
document.getElementById("btn_xspj_bc").click();
function wait(ms){
    var start = new Date().getTime();
    while (new Date().getTime() < start + ms);
}
wait(500);
document.getElementById("btn_ok").click();

但是在使用数组遍历的过程中，想采用setTimeout函数来对操作进行延时，但是当执行如下指令时，发生以意想不到的状况。

for(var i = 0; i < 10; i++){
    setTimeout(function(){
        console.log(i);
    },100);
}

习惯了Java，C++，Python等语法的我们，天真的以为，应该输出的序列是0123456789。

但是当调试程序的时候发现，每次都只操作了数组的最后一个元素。也就是说上述程序运行的结果为：

很明显跟我们需要的结果不同，我们需要的是0之后等一会儿再输出1再等一会儿再输出2，然而实际结果为100毫秒也就是0.1秒后一下子输出了10个10。

经过查询资料以及询问沸点大佬，得知这涉及到js的闭包，闭包即js可以访问函数上一层作用域的计数器。

也就是说在for循环中的 for(var i = 0; i < 10; i++)和var i = 0;for(i=0;i<10;i++)实际上是相同的。

我们知道var声明的是全局变量，也就是说当setTimeout执行的时候，for循环已经完成，i此时的值已经变成了10。

接下来，查阅资料得知let声明的变量只在代码块中有效，由此我们把var换为let，再次进行尝试。

for(let i = 0; i < 10; i++){
    setTimeout(function(){
        console.log(i);
    },1000);
}

此刻我们已经得到了正确的i的值，但是实践发现仍然未能达到我们的要求，虽然i的数值是正确的，但是并没有实现每一秒钟输出一个数字的情况，而是一秒钟之后一下子输出了0123456789。

接下来我们对setTimeout函数进行了怀疑，发现他跟其他语言的sleep（）函数完全不同，他不会等待setTimeout内部的函数体执行完毕再返回，而是一种提交一个一秒钟之后执行的作业给系统，提交完之后就接着进行下一条语句。

因此，setTimeout给系统提交了10个一秒钟之后执行的指令，所以会出现一秒钟之后一下子输出0123456789的情况。

如何保证函数每秒钟执行一次成了暂时性的难题，经过和同学的讨论，有了新的突破，我们发现和setTimeout（）在一起的有个叫做setInterval()的类似函数。摒弃了传统的for循环思路，我们采用了如下解决办法

var i =0;
var timer = setInterval(function(){
    if(i == 10) {
        clearInterval(timer)
    }
    console.log(i)
    i++;
},1000)

可以看到本次执行了11秒，圆满的完成了我们每一秒输出一个数字的任务。

总结

1. JavaScript中的函数运行在它们被定义的作用域里，而不是它们被执行的作用域里。

2. let声明的变量，仅在代码块中有效，for循环条件内，var声明的为全局变量。

3. setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。

   setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。

4. setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。