js定时器 setTimeout_js settimeout什么时候回陷入死循环-优快云博客

本文链接：https://blog.youkuaiyun.com/jikexueyuan5555/article/details/79774227

本文探讨了JavaScript中setTimeout的工作原理，通过实例解释了为何在for循环中使用setTimeout会导致所有定时器同时输出相同结果。文章介绍了两种实现定时器的方法，包括递归和利用事件队列，以及涉及到的Promise执行顺序问题。通过对知乎经典问题的分析，总结了setTimeout与Promise执行顺序的规律。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

定时器心路历程：。。（消遣文）

正常的话会想先试试闭包与立即函数。。

first：

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

结果并不会是我们期待的1,2,3,4,而是在一秒钟后输出5个5，调试后发现for循环很快设置了5个定时器，他们统一会在1s后执行，设置完定时器后，当前所在事件也就是这个函数结束了，这个时候开始执行setTimeout定时器内部的函数，因为i已经是5了，所以所有的定时器里都变成了5，并一起输出了出来，所以想正经写一个定时器还是要用下递归

second：

var t;
function timer(time){
    console.log(time);
    if(time==50)
    {
        return clearTimeout(t);
    }      
    t=setTimeout(()=>timer(time+1),1000);
}
timer(1);

这个思路就是每个函数都会定义一个定时器，函数结束的时候正好运行setTimeout函数，也就是正好开启下一个函数，这样就实现了定时器雏形

剩下的就是有关es 6的思考了，（失败的思考orz）

third:

function timer(){
    var i=0;
    var p=new Promise((resolve,reject) =>{
        setTimeout(()=>{
            console.log("计时开始");
            resolve(i+1);
        },1000);
    });
    while(i<50)
    {
        p.then((val) =>{
            console.log(val);
        });
    }
    return;
}
timer();

这段代码就很玄妙了，因为setTimeout函数会放在事件队列里，等当前函数执行完了才会设定，所以会进入死循环。。

但重点却在于promise和setTimeout的执行顺序到底是怎么样

setTimeout(function(){console.log(4)},0);
new Promise(function(resolve){
    console.log(1)
    for( var i=0 ; i<10000 ; i++ ){
        i==9999 && resolve()
    }
    console.log(2)
}).then(function(){
    console.log(5)
});
console.log(3);

看到知乎上经典的问题，答案是1，2，3，5，4.

又分析了去掉while的代码，差不多得出了一个有关setTimeout和Promise的规律

setTimeout是本轮事件结束下轮事件开始时运行，promise是本轮事件结束时运行，也就是说就算是
then也是在setTimeout之前的