首页 > 其他分享 >setTimeout是如何实现的

setTimeout是如何实现的

时间:2023-12-16 21:32:38浏览次数:19  
标签:队列 执行 实现 如何 任务 定时器 setTimeout 添加

setTimeout就是一个定时器,用来指定某个函数在多少毫秒之后执行。它会返回一个整数,表示定时器的编号,同时你还可以通过该编号来取消这个定时器。

要了解定时器的工作原理,就得先来回顾下之前讲的事件循环系统,我们知道渲染进程中所有运行在主线程上的任务都需要先添加到消息队列,然后事件循环系统再按照顺序执行消息队列中的任务。下面来看看那些典型的事件:

  • 当接收到 HTML 文档数据,渲染引擎就会将“解析 DOM”事件添加到消息队列中。
  • 当用户改变了 Web 页面的窗口大小,渲染引擎就会将“重新布局”的事件添加到消息队列中。
  • 当触发了 JavaScript 引擎垃圾回收机制,渲染引擎会将“垃圾回收”任务添加到消息队列中。
  • 同样,如果要执行一段异步 JavaScript 代码,也是需要将执行任务添加到消息队列中。

以上列举的只是一小部分事件,这些事件被添加到消息队列之后,事件循环系统就会按照消息队列中的顺序来执行事件。

所以说要执行一段异步任务,需要先将任务添加到消息队列中。不过通过定时器设置回调函数有点特别,它们需要在指定的时间间隔内被调用,但消息队列中的任务是按照顺序执行的,所以为了保证回调函数能在指定时间内执行,你不能将定时器的回调函数直接添加到消息队列中。

在 Chrome 中除了正常使用的消息队列之外,还有另外一个消息队列,这个队列中维护了需要延迟执行的任务列表,包括了定时器和 Chromium 内部一些需要延迟执行的任务。所以当通过 JavaScript 创建一个定时器时,渲染进程会将该定时器的回调任务添加到延迟队列中。

其实浏览器内部实现取消定时器的操作也是非常简单的,就是直接从 delayed_incoming_queue 延迟队列中,通过 ID 查找到对应的任务,然后再将其从队列中删除掉就可以了。

1. 如果当前任务执行时间过久,会影响定时器任务的执行

2. 如果 setTimeout 存在嵌套调用,那么系统会设置最短时间间隔为 4 毫秒

3. 未激活的页面,setTimeout 执行最小间隔是 1000 毫秒

4. 延时执行时间有最大值

5. 使用 setTimeout 设置的回调函数中的 this 不符合直觉

首先,为了支持定时器的实现,浏览器增加了延时队列。其次,由于消息队列排队和一些系统级别的限制,通过 setTimeout 设置的回调任务并非总是可以实时地被执行,这样就不能满足一些实时性要求较高的需求了。最后,在定时器中使用过程中,还存在一些陷阱,需要你多加注意。


标签:队列,执行,实现,如何,任务,定时器,setTimeout,添加
From: https://blog.51cto.com/key3feng/8854391

相关文章

  • 简单实现mui-底部选项卡
    我在看官方的mui文档的时候发现并没有找到选项卡的位置,所以我并没有采纳可能是我太笨了吧接触的还少,先说说我原先是如何写底部选项卡的<navclass="mui-barmui-bar-tab"><aclass="mui-tab-itemmui-active"href="pSMain.html"> <spanclass="mui-icon"><imgsrc=......
  • SpringBoot-Validate优雅实现参数校验
    1、是什么?它简化了JavaBeanValidation的集成。JavaBeanValidation通过JSR380,也称为BeanValidation2.0,是一种标准化的方式,用于在Java应用程序中对对象的约束进行声明式验证。它允许开发人员使用注解来定义验证规则,并自动将规则应用于相应的字段或方法参数为了我们......
  • 一、Spring Boot的概述及pom文件和代码实现
    一、概述和四大特性二、学习创建springboot项目三、项目目录结构和pom文件内容四、springboot继承springmvc-查看springboot父工程pom五、代码的实现......
  • 打破限制,一键实现Line多开功能
    在日常生活中,我们经常需要同时使用多个社交软件来联系朋友、家人和同事,其中LINE是一个非常流行的聊天应用程序。然而,LINE只允许同时登录一个账号,这对于需要同时使用多个账号的人来说是一个限制。因此,许多人都在寻找一种方法来打破这个限制,以便能够同时登录多个LINE账号。最近,一些......
  • 如何写出漂亮代码 https://libin9ioak.blog.csdn.net/article/details/127749042
    从代码的编写规范,格式的优化,设计原则和一些常见的代码优化的技巧等方面总结了45个小技巧: 1、规范命名命名是写代码中最频繁的操作,比如类、属性、方法、参数等。好的名字应当能遵循以下几点:见名知意比如需要定义一个变量需要来计数inti=0;1名称i没有任何的实际意义,没有......
  • 一种可以实现搜索结果按照相似度来排序的sql,核心是分词和order by like 的使用
    常规的搜索一般使用like执行模糊搜索,这种搜索有个缺陷,一旦搜索内容里面有一个错的就会导致搜索失败。有没有一种实现可以容错的且按照相似度排序的方法呢?类似百度google那样的。经过自己的测试发现使用分词结合排序的orderbylike可以实现。我直接给出例子sql的吧  比如......
  • [JS] JS单例模式的实现
    JS单例模式的实现单例模式简介单例模式(SingletonPattern)是最简单的设计模式之一。这种类型的设计模式属于创建型模式,提供了一种创建对象的最佳方式。特点:意图:保证一个类仅有一个实例,并提供一个访问它的全局访问点。主要解决:一个全局使用的类频繁地创建与销毁。何时使用:当......
  • C++ Qt开发:Tab与Tree组件实现分页菜单
    Qt是一个跨平台C++图形界面开发库,利用Qt可以快速开发跨平台窗体应用程序,在Qt中我们可以通过拖拽的方式将不同组件放到指定的位置,实现图形化开发极大的方便了开发效率,本章将重点介绍tabWidget选择夹组件与TreeWidget树形选择组件,的常用方法及灵活运用。1.1TabWidgetQTabWidget......
  • 如何在Windows本地运行一个大语言模型
    ChatGLM3是智谱AI和清华大学KEG实验室联合发布的新一代对话预训练模型,可以在消费级显卡上轻松运行一个离线的对话机器人。它功能强大,配置过程简单,对初学者比较友好。本文记录了ChatGLM3的环境配置过程,希望能对跟我一样的新手朋友起到帮助。   准备工作:准备一台装有......
  • 解锁RocketMQ秘籍:如何保障消息顺序性?
    嗨,小伙伴们!小米在这里啦!今天我们要聊的话题是社招面试中一个经典而又百思不得其解的问题——“RocketMQ如何保证顺序性?”不用担心,小米来给你揭秘RocketMQ的秘密武器,让你轻松过关面试大关!引言:为什么要谈顺序性?首先,我们得明白为什么在消息队列中要讲究消息的顺序性。假设你正在开发一......