文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

JavaScript 的setTimeout与事件循环机制event-loop

2024-04-02 19:55

关注

1.先说说我们都知道的setTimeout

setTimeout在我们写代码中会经常用到,不管是前端还是服务端,目的是延迟执行。

    setTimeout(() => {
        console.log('延迟执行');
    },1000);

貌似没什么可讲的。

2.再讲讲我们可能不知道的setTimeout

我们可能遇到这么一个问题:在一段逻辑中,需要执行某段代码,但是怎么也没有效果。最后,在试试看+从网上找的情况下,用了一个setTimeout,神奇的事情发生了,程序能够正确运行。

我写一个具体的我们在实际项目中用到的:

需求是点击某个按钮时弹出一个弹框,然后点击弹框外的任何区域,弹框消失。但点击弹框中的任何地方和元素,弹框不会消失。

<body>
        <button type="button" class="clickBtn">点击我</button>
        <div id="mask">
            <p class="title">提示</p>
            <p>
                <span class="area-content">这是一个弹框</span>
                <a href="javascript:;" rel="external nofollow" >跳转</a>
            </p>
        </div>
        <script type="text/javascript">
            document.querySelector('.clickBtn').addEventListener('click', () => {
                document.querySelector('#mask').style.display = 'block';
                setTimeout(() => {
                    window.addEventListener('click', hides, false);
                }, 0);
            });
            function hides(e) {
                document.querySelector('#mask').style.display = 'none';
                window.removeEventListener('click', hides, false);
            }

            document.querySelector('#mask').addEventListener('click', e => {
                e.stopPropagation();
            });
        </script>
    </body>

通过上面的写法,利用setTimeout很方便的实现了页面功能,而不需要去通过各种e.target的判断去费力的实现。

上面代码最重要的在于setTimeout(()=>{},0) 这段逻辑。要明白为什么加个setTimeout就能实现,而如果不加,那么弹框就无法正确显示和隐藏,就需要知道一个很重要的概念: event-loop。 也就是事件循环机制

event-loop

事件循环机制其实在网站上也有不少的分析,而且分析的不错。最后我会附上好文章的链接供大家参考。

我在此想从宏观上再提一下event-loop

event-loop在node中和在浏览器中的实现方式不相同。node是通过libuv库来实现,而浏览器是不同的厂商去完成。这里不讨论node,只看浏览器厂商是怎么处理时间循环的。

其中有重点的含义需要清除。既然叫事件循环,那么就说明事件是循环着执行的。一个事件循环有一个或多个任务队列,每一个任务队列里的任务是严格按照先进先出的顺序执行的,但是不同任务队列的任务的执行顺序是不确定的。

那么哪些行为属于task或者microtask呢?标准没有阐述,但各种技术文章总结都如下(不包含node):

看一下标准阐述的事件循环的进程模型:

将运行完的任务从任务队列中移除:

执行进入microtask检查点时,用户代理会执行以下步骤:

那么该举个例子了,上面的知识确实有些难懂。

console.log('script start');
setTimeout(function() {
  console.log('setTimeout');
}, 0);
Promise.resolve().then(function() {
  console.log('promise1');
}).then(function() {
  console.log('promise2');
});

console.log('script end');

当然,如果你测试的浏览器支持的Promise不支持Promise/A+标准,或是你使用了其他Promise polyfill,运行结果可能有差异。

运行结果是:

script start
script end
promise1
promise2
setTimeout

具体的解释步骤在后面附的链接中有详细的解读,我就不再啰嗦了。

知识想强调一下整个事件循环:

第一个事件循环里,只有一个任务,就是js的加载 -> 把setTimeout和promise分别放入macrotasksmicrotask队列中 ->js执行完后,进入下一个事件循环 -> 执行microtask任务队列中的所有任务 -> 执行macrotasks中的一个任务,当前宏任务执行完毕后 -> 如果此时微任务队列不为空,则重新执行所有微任务,如果微任务为空,则执行下一个macroTask -> 完成,继续下一个事件循环

现在再回过头来看刚开始我写的那个弹框的例子,就能知道为什么setTimeout隔0秒以后执行,也能实现需求了。根本原因就是因为setTimeout是一个task,需要在下一个时间周期执行。

setTimeout(() => {
   console.log(1); 
},0)

setTimeout(() => {
    console.log(2);
    Promise.resolve().then(() => console.log('promise1'));
    Promise.resolve().then(() => console.log('promise2'));
}, 0)
setTimeout(() => {
    console.log(3);
}, 0)

执行结果是:

1
2
promise1
promise2
3

3. node中的时间循环执行顺序

node中的事件循环,总体上说,在node9之前,它的实现跟浏览器是不一样的,就相同api的部分来说,宏任务的执行会有区别,比如说同样是上面的这个例子, 在node 8.x中执行,顺序是这样的:

1
2
3
promise1
promise2

在node高版本中,跟浏览器的特性进行了对齐。所以在真正上线的时候,如果有线上编译的情况,一定要注意node的版本,小心这些坑。

4. 关于事件循环中的promise

setTimeout比较简单,也比较直接,我们还容易理解和使用。 但是当遇到promise的时候,会有些难度,可能如果只涉及简单的场景,promise倒是也会使用,无非就是 new Promise((resolve, reject)).then() 但是,当遇到复杂场景的时候,其实是会有坑,如果不真正了解原理,是容易掉坑里的。

到此这篇关于JavaScript 的setTimeout与事件循环机制event-loop的文章就介绍到这了,更多相关JS setTimeout内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯