JavaScript基础 —— setTimeout和for循环的搭配使用

在学习javascript的过程中，经常会看到setTimeout函数和for循环搭配使用，这里对setTimeout函数做一个简单的总结，如有错误欢迎指正。

1.定义及用法

setTimeout函数用来指定某个函数或某段代码，在多少毫秒之后执行。用法为，

var timerId = setTimeout(func|code, delay);

其中第一个参数func|code为将要被推迟的函数或代码，第二个参数为执行延迟的毫秒数。例如，

var a=1;
setTimeout('console.log(a)',1000); //1s后输出1

2.setTimeout的延迟时间说明

setTimeout的延迟时间实际上并不是指执行上的，它的真正含义是将函数或代码延迟一段时间添加到任务队列中，并不是延迟一段时间后就立即执行。

也就是说，浏览器会先按主程序顺序执行，遇到setTimeout就将该函数中的func|code放到执行队列中，等到主程序执行完毕后，才开始从执行队列中按延迟时间长短依次取出来执行。

注意：即使setTimeout函数的延迟时间设置为0，仍需要放到队列中，等主程序运行完后再拿出来执行。

上例子，

console.log("1");
setTimeout(function(){
    console.log("2");
},1000);
console.log("3");
setTimeout(function(){
    console.log("4");
},0);
console.log("5");

//输出结果：
1
3
5
4
2  

3.与for循环搭配

我们先看下面这段代码，

for(var i=1; i<5; i++){
    (function(){
        setTimeout(function timer(){
            console.log(i);
        },1000);
    }());
}

//输出结果：1s后同时输出4个5
5
5
5
5

这段代码的本意是每隔1s打印一次 i 的值，每次 i 值应该变化，但事实上却是三次 i 的值都是3，但即使是用到了自执行函数，也是对setTimeout函数自执行，对它包围的timer函数仍会先放到执行队列中，所以在这里自执行函数实际上是无效的。

这里的解决方法，是对setTimeout函数进行封装，使得每次调用定时函数都有自己的私有变量值，let j=i; 或 var j=i; 均可。

for(var i=1; i<5; i++){
    (function(){
        var j=i;
        setTimeout(function timer(){
            console.log(j);
        },1000);
    }());
}

//输出结果：1s后同时输出1到4
1
2
3
4

扫描二维码关注公众号，回复： 13138541 查看本文章