setTimeout的工作原理

于 2022-02-07 17:47:16 发布
阅读量1.4k 收藏
点赞数 1
CC 4.0 BY-SA版权
分类专栏： js 文章标签： 前端 javascript jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_40918145/article/details/122812333
本文详细阐述了JavaScript中setTimeout的运行机制，它会在当前执行上下文结束，下一轮EventLoop时检查时间并执行任务。由于其依赖于任务队列和同步任务的执行顺序，setTimeout的执行时间并不确定。理解这一机制对于优化JavaScript代码和掌握异步编程至关重要。

setTimeout的运行机制是，将指定的代码移出本次执行，等到下一轮Event Loop时，再检查是否到了指定时间。如果到了，就执行对应的代码；如果不到，就等到再下一轮Event Loop时重新判断。这意味着，setTimeout指定的代码，必须等到本次执行的所有代码都执行完，才会执行。

每一轮Event Loop时，都会将“任务队列”中需要执行的任务，一次执行完。setTimeout是把任务添加到“任务队列”的尾部。因此，它们实际上要等到当前脚本的所有同步任务执行完，然后再等到本次Event Loop的“任务队列”的所有任务执行完，才会开始执行。由于前面的任务到底需要多少时间执行完，是不确定的，所以没有办法保证，setTimeout指定的任务，一定会按照预定时间执行。

通过setTimeout理解js异步原理
往后橘生
04-24 4398
在上一篇的文章中介绍了js异步原理，有的小伙伴可能还有些云里雾里，在本篇文章中将以新手很容易用错的setTimeout为例来解释js的异步原理。 首先我们看一个例子 console.log(1); setTimeout(function(){ console.log(2); },500); console.log(3); // 运行结果 // 1 // 3
JS的单线程特性及其异步处理机制：事件循环与 `setTimeout`工作原理
最新发布
2301_79858914的博客
08-16 461
JavaScript 本质上是单线程的，但通过事件循环和 Web APIs 的协作，它能够非阻塞地处理异步任务，如。
javascript 的线程问题，收藏
Now . Or Never ``
07-27 7518
<br /><br />JavaScript的setTimeout与setInterval是两个很容易欺骗别人感情的方法,因为我们开始常常以为调用了就会按既定的方式执行, 我想不少人都深有同感, 例如<br />setTimeout( function(){ alert(’你好!’); } , 0);<br />setInterval( callbackFunction , 100);<br />认为setTimeout中的问候方法会立即被执行,因为这并不是凭空而说,而是JavaScript API文档明确
详解setTimeout原理
weixin_30414635的博客
07-06 1169
一、先上图吧：（引出问题） 你是不是觉得结果很有意思，好，我们说下原理： 主要是定时器异步，作用域问题。 二、详解setTimeout： setTimeout的运行机制是，将指定的代码移出本次执行，等到下一轮Event Loop时，再检查是否到了指定时间。如果到了，就执行对应的代码；如果不到，就等到再下一轮Event Loop时重新判断。这意味着，setTimeout指定的代码，必须等...
setTimeout执行原理
问心.心问的博客
06-04 1301
setTimeout执行原理 setTimeout属于异步执行函数，当程序执行完console.log(1,time1)后;遇到setTimeout会将该函数放入等待队列，等待当前主程序执行完毕后开始执行setTimeout,由于后面的几个都是setTimeout,因此都会放到等待队列~~~ 那么这些队列里的函数谁先执行呢？就是根据setTimeout里的第二个参数（延迟时间）决定的，例如 setTimeout(function(){ var time3=new Date().getTim
Javascript引擎单线程机制及setTimeout执行原理说明
weixin_34192732的博客
07-16 196
setTimeout用法在实际项目中还是会时常遇到。比如浏览器会聪明的等到一个函数堆栈结束后才改变DOM，如果再这个函数堆栈中把页面背景先从白色设为红色，再设回白色，那么浏览器会认为DOM没有发生任何改变而忽略这两句话，因此我们可以通过setTimeout把&ldquo;设回白色&rdquo;函数加入下一个堆栈，那么就可以确保背景颜色发生过改变了（虽然速度很快可能无法被察觉）。...
AngularJS 工作原理详解
10-21
本文将详细介绍AngularJS的工作原理，包括其启动过程、数据绑定机制、事件循环以及与浏览器事件交互的过程。 首先，AngularJS应用程序的启动流程通常是从HTML页面开始的。在HTML中，我们通过ng-app指令来标识一个...
JavaScrip单线程引擎工作原理分析
12-11
总结来说，JavaScript的单线程模型和异步事件处理机制决定了计时器的工作方式。理解这一点对于编写高性能、响应式的前端应用至关重要。在处理异步操作时，应充分利用回调、Promise、async/await等机制，以避免阻塞...
javascript 定时器工作原理分析
11-26
setTimeout() MDN对 setTimeout 的定义为： 在指定的延迟时间之后调用一个函数或执行一个代码片段。 语法 setTimeout 的语法非常简单，第一个参数为回调函数，第二个参数为延时的时间。函数返回一个数值类型的ID唯一...
setTimeout 实现原理
weixin_43436675的博客
04-14 398
setTimeout 实现 渲染进程所有运行在主线程上的任务都需要先添加到消息队列中,然后事件循环系统顺序执行消息队列 eg: 解析 DOM; 改变 web 大小, 重新布局; js 垃圾回收; 异步执行 js 代码 但是定时器的任务不能直接放置在消息队列中,他需要按照时间间隔来执行,因此,chrome 除了消息队列外,新增了个延时队列,在每次执行完任务后,执行延迟队列中的任务,计算出到期任务,依次执行 代码实现: 在每次新增一个定时器时,将定时器添加到 DelayTask 中 执行消息循环时,在当前
JavaScript setTimeout 的原理
du_peiduo的专栏
11-10 780
JavaScript 引擎是基于事件驱动单线程执行的，JavaScript 引擎一直等待着任务队列中的任务，接收到任务就加以处理，任务过多时会按序等待处理。 setTimeout 调用的时候，JavaScript引擎会启动定时器 timer，在第二个参数 n 毫秒 以后执行第一个参数回调或代码段，当定时器的时间到了，就把该事件放到主事件队列等待处理。 也就是说需要看任务放到队列中的顺序。 ...
详解 setTimeout 实现机制与原理，手写一个实现
我本可以容忍阳光，如果我不曾见过太阳，然而阳光已使我荒凉，成为更新的荒凉。
03-29 4855
面试官也在看的前端面试资料setTimeout 方法，就是一个定时器，用来指定某个函数在多少毫秒之后执行。它会返回一个整数，表示定时器的编号，同时你还可以通过该编号来取消这个定时器：fun...
javascript真的是异步的吗？且看setTimeout的实现原理以及setTimeout(0)的使用场景
热门推荐
aty
07-08 1万+
JavaScript是单线程执行的，无法同时执行多段代码。当某一段代码正在执行的时候，所有后续的任务都必须等待，形成一个队列。一旦当前任务执行完毕，再从队列中取出下一个任务，这也常被称为 “阻塞式执行”。所以一次鼠标点击，或是计时器到达时间点，或是Ajax请求完成触发了回调函数，这些事件处理程序或回调函数都不会立即运行，而是立即排队，一旦线程有空闲就执行。所以 setTimeout 并不能保证执行的时间，是否及时执行取决于 JavaScript 线程是拥挤还是空闲。
你应该知道的 setTimeout 秘密
weixin_33932129的博客
01-10 709
计时器setTimeout是我们经常会用到的，它用于在指定的毫秒数后调用函数或计算表达式。 语法：setTimeout(code, millisec, args); 注意：如果code为字符串，相当于执行eval()方法来执行code。 当然，这一篇文章并不仅仅告诉你怎么用setTimeout，而且理解其是如何执行的。 1、setTime...
SetTimeout运行机制
ao347610549284563的博客
09-17 377
将指定的代码移出本次执行，等到下一轮Event Loop时，再检查是否到了指定时间。如果到了，就执行对应的代码；如果不到，就等到再下一轮Event Loop时重新判断。这意味着，setTimeout指定的代码，必须等到本次执行的所有代码都执行完，才会执行。 详细讲解：https://www.jianshu.com/p/3e482748369d?from=groupmessa...
setTimeout实现原理和使用注意
LuckyWinty的博客
11-07 3179
setTimeout，它就是一个定时器，用来指定某个函数在多少毫秒之后执行。setTimeout用法vartimeoutID=setTimeout(function...
setTimeout及Js的工作原理
hotdogcug的专栏
04-21 6190
Javascript中会经常用到setTimeout来推迟一个函数的执行，如：setTimeout(function(){alert("Hello World");},1000)会在执行到这句话后延迟1秒钟来弹出alert窗口。那么再看这一段：function a() {　　setTimeout(function(){alert(1)},0);　　alert
关于setTimeout
weixin_33911824的博客
03-11 207
面试官：“你知道定时器吗？”我：“知道”面试官：“那你说说什么是定时器”我：“定时器是可以用setTimeout来实现的”面试官：“setTimeout(function () { console.log("1") },0);console.log("2");那你说说控制台上输出顺序是什么？”我：支支吾吾...... so....就有了这篇文章,唠叨了这么久，正文开始了！ setTimeout的语...
settimeout与setinterval的原理
09-16
setTimeout和setInterval都是JavaScript引擎提供的定时器方法。setTimeout主要用于需要进行延时调用的场景，而setInterval则用于循环调用函数。 setTimeout的运行机制是将函数添加到任务队列中，指定的时间间隔后执行一次函数。它可以保证函数在指定的时间间隔内不会被执行，即使是设置的延时很短。而setInterval会连续往任务队列中添加函数，导致函数有可能接近连续执行，这是因为任务队列中的函数执行时间可能会超过设置的时间间隔。 在实际编码中，由于setInterval存在性能问题，开发人员通常会使用setTimeout来模拟setInterval，以避免函数连续执行的情况。这种模拟的方法是在函数内部的定时器中再次调用setTimeout，以实现循环调用的效果。 总结起来，setTimeout和setInterval是用于函数的延时执行和循环调用。setTimeout将函数添加到任务队列中，指定的时间间隔后执行一次函数，而setInterval会连续往任务队列中添加函数，导致函数有可能接近连续执行。在实际编码中，开发人员通常使用setTimeout来模拟setInterval，以避免性能问题。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值