setTimeout是如何实现的

最新推荐文章于 2024-02-20 10:34:44 发布
最新推荐文章于 2024-02-20 10:34:44 发布
阅读量251 收藏
点赞数
分类专栏： 学习记录 文章标签： javascript 前端 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_48886692/article/details/121757351
版权

setTimeout是指定多少毫秒的时间后执行某个方法的API

浏览器怎么实现定时器

Chorme浏览器除了正常使用的消息队列以外，还有一个消息队列用于处理需要延迟执行的任务，包括了定时器和Chomium的一些延迟任务，所以当Javascript创建一个定时器的时候，会放入浏览器的延迟队列中等待执行
当创建一个定时器的时候，渲染进程会创建一个回调任务，里面包含回调函数，开始时间，延迟时间，函数的showName
延迟队列的任务的执行是通过开始时间和延迟时间计算出任务的到期时间，然后执行延迟队列中的到期任务，执行完后再进入下一个循环。
设置一个定时器，JS会返回定时器的ID，可以根据定时器的ID清除未开始执行的延时任务；浏览器内部删除定时器是根据定时器的ID，在延迟队列中找到任务并清除出队列

使用定时器的注意事项

  1. 避免长任务导致延迟
  2. 避免定时器嵌套
  3. 未激活的界面，最小延迟时间为1000ms
  4. 设置延迟时间有最大值，24.8天，超过这个时间就会溢出，函数立即执行
  5. 定时器的this可能会不一致，在严格模式下，定时器的this是undefined，非严格模式下为window，要避免这个情况可以使用匿名函数或者使用bind绑定this

setImmediate

setTimeout的最小延迟时间在4ms，而setImmediate的最小延迟时间可以在1ms以内

其他异步模型

requestAnimationFrame

requestAnimationFrame和屏幕刷新频率同步，在不支持requestAnimationFrame的浏览器中，只能使用setTimeout或者setInterval来实现动画，这样连续几次修改dom就会造成丢帧，卡顿的现象

Promise

如果想要任务在下一次事件循环后执行的话，使用Promise比setTimeout(0)先执行

process.nextTick

process.nextTick比Promise更早执行，他不会进入延迟队列中，而是直接强插入主线程得任务列表中，不会阻塞主线程，但是会阻塞延迟队列中的任务执行，如果嵌套process.nextTick可能会导致异步任务一直不能执行

咸鱼要翻身233
关注
专栏目录
JavaScript基于setTimeout实现计数的方法
10-24
在探讨基于setTimeout实现计数之前，我们需要了解JavaScript中的异步编程模式。JavaScript语言单线程的特性意味着在任何给定的时刻，只能执行一段代码。但是，这并不意味着Web应用程序会在执行长时间运行的任务时被...
（四）setTimeout 是如何实现的
Luckyzhoufangbing的博客
05-17 373
1. 为了支持定时器的实现，浏览器增加了延时队列 2. 通过 JavaScript 创建一个定时器时，渲染进程会将该定时器的回调任务添加到延迟队列中 3. 处理完消息队列中的一个任务之后，就开始执行延迟队列里面的任务。延迟队列会根据发起时间和延迟时间计算出到期的任务，然后依次执行这些到期的任务。等到期的任务执行完成之后，再继续下一个循环过程。通过这样的方式，一个完整的定时器就实现了 4.使用 setTimeout 的一些注意事项 (1)如果当前任务执行时间过久，会影响定时器任务的执行 (2)...
实现setTimeout准时执行
qq_43539854的博客
05-20 1741
setTimeout准时执行 1. 采用系统时间补偿法：修正每次时间间隔，前面耽误了时间，那么就缩小当前定时器的间隔时间。 第一个定时器执行了67ms，为了能在100ms的时候执行两次定时器，所以第二次定时器的时间就设置为33ms。 Offset = 现在的时间（67ms）- 执行一个定时器消耗的时间（50ms） = 时间差（17ms） Offset = new Date().getTime() - (startTime + count * interval) 当前定时器的时间间隔 = 原来定时器的时间间
字节面试官问粉丝，如何实现准时的setTimeout
qq_34998786的博客
04-30 453
最近一个粉丝去面字节，被面试官问到了这个问题来问我，一听感觉有点意思，于是对它进行了一番研究，可能研究的过程以及结果不一定是最好的，但是还是记录一下，为各位提供一些帮助。拿到这个问题，假设...
setTimeout实现原理和使用注意
LuckyWinty的博客
11-07 3043
setTimeout，它就是一个定时器，用来指定某个函数在多少毫秒之后执行。setTimeout用法vartimeoutID=setTimeout(function...
详解 setTimeout 实现机制与原理，手写一个实现
我本可以容忍阳光，如果我不曾见过太阳，然而阳光已使我荒凉，成为更新的荒凉。
03-29 4404
面试官也在看的前端面试资料setTimeout 方法，就是一个定时器，用来指定某个函数在多少毫秒之后执行。它会返回一个整数，表示定时器的编号，同时你还可以通过该编号来取消这个定时器：fun...
js学使用setTimeout实现轮循动画
10-19
### 知识点二：使用setTimeout实现递归轮循 在实现轮循动画时，通常会用到递归思想。即在每次动画执行完毕后，再次调用定时器，这样可以形成一个持续的动画效果。为了避免内存泄漏，我们需要在动画再次触发之前清除...
js setTimeout实现延迟关闭弹出层
10-29
通过本文的介绍，我们可以看到使用JavaScript的`setTimeout`和`clearTimeout`函数，可以方便地实现弹出层延迟关闭以及鼠标悬停保持显示的交互效果。这种方法简单易用，适用于多种Web交互场景，是前端开发者需要掌握...
js基于setTimeout与setInterval实现多线程
10-22
在实现多线程时，`setTimeout`和`setInterval`的异步性质允许我们在主线程不被阻塞的情况下，安排其他代码的执行。但是，我们要注意的是，这两个函数并不真正提供并行执行的能力。在JavaScript中，虽然可以实现异步...
Javascript延迟执行实现方法(setTimeout)
10-28
使用`setTimeout`函数可以实现代码的延迟执行，这是一种非常实用的技术手段，尤其在减少不必要的服务器请求和优化页面性能方面。以下是对JavaScript中使用`setTimeout`实现延迟执行相关知识点的详细解读。 首先，`...
setTimeout方法
热门推荐
weixin_44552233的博客
05-07 2万+
很多时候我们编写代码的时候都需要用到定时器，下面我给大家介绍一个方法，利用它我们也能做定时器。下面给大家介绍这个方法的几种常用的写法。 SetTimeout方法 第一种写法↓ setTimeout方法是指在指定时间后执行一次指定函数。强调！只执行一次！ ObjSetTimeout后面的window可以省略不写。SetTimeout后面的括号传入函数名称，注意只是传入名称不能有括号，函数名称后面就...
JavaScript中的setTimeout是如何实现的？
debug_bug142的博客
10-01 100
需要注意的是，上述的setTimeoutCustom函数只是一个简单的示例，实际的setTimeout函数可能会更加复杂，因为它还需要处理取消定时器、传递额外的参数等功能。在每次检查中，它计算经过的时间（elapsedTime），如果已经达到或超过延迟时间，则执行回调函数。在JavaScript中，setTimeout函数用于在指定的时间间隔之后执行一次或多次特定的代码。计时器是用于测量时间间隔的组件。JavaScript引擎通过计时器来跟踪经过的时间，并在指定的时间间隔之后触发相应的任务。
java 实现 setTimeout 和 setInterval 效果
小小程序员的博客
07-27 2723
java 实现 setTimeout 效果
有趣的setTimeout--节流和防抖的实现
木子聊前端
04-13 1158
1. setTimeout setTimeout() 是一个默认是全局方法，用来设置一个定时器，该方法在定时器到期后执行一个函数或指定的一段代码 语法： let timerId = setTimeout(func|code, [delay], [arg1], [arg2], ...) 参数说明： func|code 想要执行的函数或代码字符串。 一般传入的都是函数。由于某些历史原因，支持传入代码字符串，但是不建议这样做。 delay 执行前的延时，以毫秒为单位（1000 毫秒 = 1 秒），默认值是 0；
如何实现setTimeout
lovermeiy的博客
12-11 735
    setTimeout就是一个定时器，用来指定某个函数在多少毫秒之后执行。它会返回一个整数，表示定时器的编号，同时你还可以通过该编号来取消这个定时器。     要执行一段异步任务，需要先将任务添加到消息队列中。不过通过定时器设置回调函数有点特别，它们需要在指定的时间间隔内被调用，但消息队列中的任务是按照顺序执行的，所以为了保证回调函数能在指定时间内执行，你不能将定时器的回调函数直接添加到消息队列中。     在 Chrome 中除了正常使用的消息队列之外，还有另外一个消息队列（定时器线程上的消息队列吧
setTimeout的简易实现
m0_56204836的博客
03-30 376
var mySetTimeout = function(fn, timeout = 0, ...args){ var start= +new Date(); var timer, now; var loop = () => { timer = window.requestAnimationFrame(loop); now = +new Date(); if(now - start >= timeout){ fn.apply(this, args); window.
关于实现setTimeout准时性的探讨
cpa0701的博客
04-22 780
目录背景whileWeb WorkerrequestAnimationFramesetTimeout 系统时间补偿 背景 运行代码如下，通过一个计数器来记录每一次 setTimeout 的调用，而设定的间隔 * 计数次数，就等于理想状态下的延迟，通过以下例子来查看我们计时器的准确性。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>test</
实现准时setTimeout
最新发布
Front小思的博客
02-20 528
setTimeout 是不准的。因为 setTimeout 是一个宏任务，它指定时间指的是：进入主线程的时间。
setTimeout的工作原理
weixin_40918145的博客
02-07 1371
setTimeout的运行机制是，将指定的代码移出本次执行，等到下一轮Event Loop时，再检查是否到了指定时间。如果到了，就执行对应的代码；如果不到，就等到再下一轮Event Loop时重新判断。这意味着，setTimeout指定的代码，必须等到本次执行的所有代码都执行完，才会执行。 每一轮Event Loop时，都会将“任务队列”中需要执行的任务，一次执行完。setTimeout是把任务添加到“任务队列”的尾部。因此，它们实际上要等到当前脚本的所有同步任务执行完，然后再等到本次Event Loop
settimeout实现sleep
07-20
在 JavaScript 中，`setTimeout` 函数可以用来实现类似 `sleep` 的效果。`setTimeout` 函数接受两个参数：一个是回调函数，另一个是延迟的时间（以毫秒为单位）。 以下是一个简单的示例，演示如何使用 `setTimeout`...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值