JavaScript中的setTimeout是如何实现的？

最新推荐文章于 2023-12-14 10:53:33 发布
最新推荐文章于 2023-12-14 10:53:33 发布
阅读量131 收藏
点赞数
CC 4.0 BY-SA版权
文章标签： javascript 开发语言 ecmascript JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/debug_bug142/article/details/133461129
JavaScript 专栏收录该内容
306 篇文章 ¥59.90 ¥99.00
订阅专栏
本文介绍了JavaScript中的setTimeout函数实现机制，涉及事件循环和计时器。事件循环负责任务执行顺序，计时器追踪时间并触发任务。通过示例解释了简单setTimeout函数的工作方式，强调实际的setTimeout更复杂，还需处理取消、传递参数等功能。

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

在JavaScript中，setTimeout函数用于在指定的时间间隔之后执行一次或多次特定的代码。它是一种常用的定时器函数，允许我们创建延迟执行的任务。

setTimeout的实现涉及两个主要的组件：事件循环和计时器。

事件循环是JavaScript的执行模型，它负责管理代码执行的顺序和调度。它持续地从任务队列中取出待执行的任务，并将其推入执行栈中执行。任务队列中包含了不同类型的任务，包括用户交互事件、网络请求回调以及定时器任务等。

计时器是用于测量时间间隔的组件。JavaScript引擎通过计时器来跟踪经过的时间，并在指定的时间间隔之后触发相应的任务。

下面是一个简单的setTimeout的实现示例：

function setTimeoutCustom(callback, delay) {
   
  // 获取
了解本专栏 订阅专栏 解锁全文
有趣的setTimeout--节流和防抖的实现
木子聊前端
04-13 1211
1. setTimeout setTimeout() 是一个默认是全局方法，用来设置一个定时器，该方法在定时器到期后执行一个函数或指定的一段代码 语法： let timerId = setTimeout(func|code, [delay], [arg1], [arg2], ...) 参数说明： func|code 想要执行的函数或代码字符串。 一般传入的都是函数。由于某些历史原因，支持传入代码字符串，但是不建议这样做。 delay 执行前的延时，以毫秒为单位（1000 毫秒 = 1 秒），默认值是 0；
字节面试官问粉丝，如何实现准时的setTimeout
qq_34998786的博客
04-30 473
最近一个粉丝去面字节，被面试官问到了这个问题来问我，一听感觉有点意思，于是对它进行了一番研究，可能研究的过程以及结果不一定是最好的，但是还是记录一下，为各位提供一些帮助。拿到这个问题，假设...
如何实现setTimeout
lovermeiy的博客
12-11 775
    setTimeout就是一个定时器，用来指定某个函数在多少毫秒之后执行。它会返回一个整数，表示定时器的编号，同时你还可以通过该编号来取消这个定时器。     要执行一段异步任务，需要先将任务添加到消息队列中。不过通过定时器设置回调函数有点特别，它们需要在指定的时间间隔内被调用，但消息队列中的任务是按照顺序执行的，所以为了保证回调函数能在指定时间内执行，你不能将定时器的回调函数直接添加到消息队列中。     在 Chrome 中除了正常使用的消息队列之外，还有另外一个消息队列（定时器线程上的消息队列吧
setTimeout的简易实现
m0_56204836的博客
03-30 409
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是如何实现的
qq_48886692的博客
12-07 275
setTimeout是指定多少毫秒的时间后执行某个方法的API 浏览器怎么实现定时器 Chorme浏览器除了正常使用的消息队列以外，还有一个消息队列用于处理需要延迟执行的任务，包括了定时器和Chomium的一些延迟任务，所以当Javascript创建一个定时器的时候，会放入浏览器的延迟队列中等待执行 当创建一个定时器的时候，渲染进程会创建一个回调任务，里面包含回调函数，开始时间，延迟时间，函数的showName 延迟队列的任务的执行是通过开始时间和延迟时间计算出任务的到期时间，然后执行延迟队列中的到期任务，
Javascript中setTimeOut和setInterval的定时器用法
01-19
Javascript的setTimeOut和setInterval函数应用非常广泛，它们都用来处理延时和定时任务，比如打开网页一段时间后弹出一个登录框，页面每隔一段时间发送异步请求获取最新数据等等。但它们的应用是有区别的。 ...
JavaScript基于setTimeout实现计数的方法
10-24
在探讨基于setTimeout实现计数之前，我们需要了解JavaScript中的异步编程模式。JavaScript语言单线程的特性意味着在任何给定的时刻，只能执行一段代码。但是，这并不意味着Web应用程序会在执行长时间运行的任务时被...
javascript中setTimeout使用指南
10-23
这种写法在现代JavaScript开发中是不推荐的，因为它使用了eval来执行字符串，这可能导致安全问题和性能下降。通常情况下，应当优先考虑使用函数引用的方式。 第二种方法，是使用函数引用调用setTimeout函数。这种...
让JavaScript中setTimeout支持链式操作的方法
10-24
在JavaScript中，setTimeout是常用的异步操作函数，用于设置一个定时器，该定时器在指定的毫秒数后执行一个函数。然而，由于setTimeout本身返回的定时器ID并不是一个promise对象，因此它并不支持链式调用。在一些...
setTimeout方法
热门推荐
weixin_44552233的博客
05-07 2万+
很多时候我们编写代码的时候都需要用到定时器，下面我给大家介绍一个方法，利用它我们也能做定时器。下面给大家介绍这个方法的几种常用的写法。 SetTimeout方法 第一种写法↓ setTimeout方法是指在指定时间后执行一次指定函数。强调！只执行一次！ ObjSetTimeout后面的window可以省略不写。SetTimeout后面的括号传入函数名称，注意只是传入名称不能有括号，函数名称后面就...
java 实现 setTimeout 和 setInterval 效果
小小程序员的博客
07-27 3057
java 实现 setTimeout 效果
实现setTimeout准时执行
qq_43539854的博客
05-20 1864
setTimeout准时执行 1. 采用系统时间补偿法：修正每次时间间隔，前面耽误了时间，那么就缩小当前定时器的间隔时间。 第一个定时器执行了67ms，为了能在100ms的时候执行两次定时器，所以第二次定时器的时间就设置为33ms。 Offset = 现在的时间（67ms）- 执行一个定时器消耗的时间（50ms） = 时间差（17ms） Offset = new Date().getTime() - (startTime + count * interval) 当前定时器的时间间隔 = 原来定时器的时间间
（四）setTimeout 是如何实现的
Luckyzhoufangbing的博客
05-17 402
1. 为了支持定时器的实现，浏览器增加了延时队列 2. 通过 JavaScript 创建一个定时器时，渲染进程会将该定时器的回调任务添加到延迟队列中 3. 处理完消息队列中的一个任务之后，就开始执行延迟队列里面的任务。延迟队列会根据发起时间和延迟时间计算出到期的任务，然后依次执行这些到期的任务。等到期的任务执行完成之后，再继续下一个循环过程。通过这样的方式，一个完整的定时器就实现了 4.使用 setTimeout 的一些注意事项 (1)如果当前任务执行时间过久，会影响定时器任务的执行 (2)...
setTimeout实现原理和使用注意
LuckyWinty的博客
11-07 3135
setTimeout，它就是一个定时器，用来指定某个函数在多少毫秒之后执行。setTimeout用法vartimeoutID=setTimeout(function...
js实现动态时间(setTimeout)
无
06-29 3011
js中的日期，计时器 function mytime(){ //获得当前时间 var today=new Date(); //将当前时间转换为年月日的格式显示 //document.write(today.toLocaleString()); //得到年 var year=today.getFullYear(); //得到月份，0-11 var month=tod
javascript总结：setTimeout模拟setInterval
张培跃的个人博客
08-14 720
setTimeout和setInterval的语法相同。它们都有两个参数，一个是将要执行的代码字符串，还有一个是以毫秒为单位的时间间隔。 setInterval(()=>{}, 1000); setTimeout(()=>{}, 1000); 区别：setInterval在执行完一次代码之后，经过指定的时间间隔，执行代码，而setTimeout只执行一次那段代码。 注意：假设s...
javascript 实现准时的setTimeout
最新发布
国企程序媛 record 前端技术 & review code。。。
12-14 368
当每一次定时器执行时后，都去获取系统的时间来进行修正，虽然每次运行可能会有误差，但是通过系统时间对每次运行的修复，能够让后面每一次时间都得到一个补偿。来获取数据，比如直播页面，接口返回给我们一个时间，我们需要在时间到达后去执行一些操作，使用。会发现setTimeout 是不准的，因为 setTimeout 是一个。通过系统的时间补偿，能够让我们的 setTimeout 变得更加准时。，它的指定时间指的是：进入主线程的时间。setTimeout 系统时间补偿。
关于实现setTimeout准时性的探讨
cpa0701的博客
04-22 838
目录背景whileWeb WorkerrequestAnimationFramesetTimeout 系统时间补偿 背景 运行代码如下，通过一个计数器来记录每一次 setTimeout 的调用，而设定的间隔 * 计数次数，就等于理想状态下的延迟，通过以下例子来查看我们计时器的准确性。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>test</
js中setTimeout（）定时器的实现
qq_36689372的博客
09-06 6171
var time = setTimeout(opa, 5000); function opa() { alert("我会每隔5s出现一次哦！"); clearTimeout(time); //清除上一次的定时器，否则会无限开多个 setTimeout(opa, 5000);//方法中调用定时器实现循环 } setTimeout() 方法用于在指定的毫秒数后调用函数
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值