定时循环输出汇总（闭包 promise async）

Posted on

参考网站：https://zhuanlan.zhihu.com/p/25855075

/*for(var i=0;i<4;i++){
console.log(i);
}//0 1 2 3直接顺序输出

for(var i=0;i<4;i++){
setTimeout(function(){console.log(i);},1000);
}//隔1s输出4444

for(var i=0;i<4;i++){
(function(a){
setTimeout(function(){console.log(a);},1000);
})(i)
}//隔1s输出0123（传入i）

for(let i=0;i<4;i++){
setTimeout(function(){console.log(i);},1000);
}//隔1s输出0123（使用let）

for (var i = 0; i < 4; i++) {
setTimeout(fn(i), 3000);
}//fn()压栈，显示的实际是function(){console.log(a);},3s后执行
function fn(a){
return function(){
console.log(a);
}
}//无return的话，就直接输出了

//以上为隔n秒后输出全部
//以下为隔n秒输出一个数
for(var i=0;i<4;i++){
(function(a){
setTimeout(function(){console.log(a);},1000a);
})(i)
}//设置1000a 相对于初始时间依次递增
function a(){
var s = 0;
setInterval(function(){console.log(s);s++},1000);
}//setInterval实现
var obj={val:0,
count:function(){
this.val++;
console.log(this.val);
}
};
setInterval(()=>{obj.count();},1000) //对象方法调用实现
*/

几个特例：
一、

1
2
3
4
5
6
7
8
 
for (var i = 0; i < 5; i++) {
    setTimeout(function() {
        console.log(i);
    }, 1000);
}
console.log(i); //5 55555

注意点：var换为let后，循环外的console.log无法输出5，因为会把i限定在循环内，循环体外无i。

二、promise实现见链接
注意点：将多个promise中的setTimeout函数推入tasks数组，Promise.all(tasks).then实现。

三、async实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
const sleep = (timeountMS) => new Promise((resolve) => {
    setTimeout(resolve, timeountMS);
});

(async () => {  // 声明即执行的 async 函数表达式
    for (var i = 0; i < 5; i++) {
        await sleep(1000);  //暂停一秒
        console.log(new Date, i);
    }

    await sleep(1000);
    console.log(new Date, i);
})();