深入js运行机制之--setTimeout／setInterval【深度理解】

最新推荐文章于 2025-05-29 23:26:41 发布

orchid_313

最新推荐文章于 2025-05-29 23:26:41 发布

阅读量603

点赞数

CC 4.0 BY-SA版权

分类专栏： javascript 文章标签： setTimeout javascript js线程异步任务

本文链接：https://blog.youkuaiyun.com/orchid_djl/article/details/79934108

javascript 专栏收录该内容

8 篇文章

订阅专栏

本文探讨了JavaScript的单线程特性以及异步任务处理，特别是setTimeout和setInterval。当这两个函数的等待时间结束，它们并不会立即执行，而是将任务放入任务队列。只有当前同步任务执行完毕后，才会从任务队列中取出并执行这些任务。通过两个实例，详细解析了setTimeout和setInterval如何在主线程执行完毕后，按照异步任务队列的顺序依次执行。

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

js是单线程机制。异步操作，如ajax请求、setTimeout/setInterval、js事件等，会等到同步程序执行之后，将异步操作放入任务队列中。

今天我们来看setTimeout／setInterval。

setTimeout的等待时间结束后，并不是直接执行的，而是推入浏览器的一个任务队列中，在同步队列结束后，再一次调用任务队列中的任务。（setInterval则是每隔一段时间，就把任务放在任务队列中，举一反三哦）

举个栗子：

        var a = 1;
        function test () {
            setTimeout(function () {
                a = 5;
                console.log( a );
            }, 0);
            console.log( a );
        }    
        test();
        console.log( 0 )
        //结果：1，0，5

setTimeout延迟时间是0s，意味着，立马把任务放进任务队列中，在主线程完全执行完毕之后，按异步任务队列中的顺序执行。所以会在同步任务队列执行完毕之后才执行setTimeout的函数。

再来看一个栗子：

        var startTime =  +new Date();
        function sleep(time){
            for (var i = 0; i < time; i++) {
                console.log(i);
            }
        }
        console.log(startTime);
        setTimeout(function(){
            console.log(+new Date() - startTime);       //代码片段1   
        }, 100);    
        sleep(10000);

        //结果大于期待的100ms，我的代码片段1输出：975。

结果说明，先运行同步线程，运行完毕之后，才会执行异步队列中的。