首页 > 编程语言 >JavaScript 事件循环竟还能这样玩!

JavaScript 事件循环竟还能这样玩!

时间：2024-06-03 10:33:57浏览次数：24  
标签：now 调用 队列 JavaScript callback 任务 循环 事件 setTimeout

JavaScript 是一种单线程的编程语言，这意味着它一次只能执行一个任务。为了能够处理异步操作，JavaScript 使用了一种称为事件循环（Event Loop）的机制。
本文将深入探讨事件循环的工作原理，并展示如何基于这一原理实现一个更为准确的 setTimeout、setInterval

什么是事件循环？

事件循环是 JavaScript 运行时环境中处理异步操作的核心机制。它允许 JavaScript 在执行任务时不会阻塞主线程，从而实现非阻塞 I/O 操作。

为了理解事件循环，首先需要了解以下几个关键概念：

  1. 调用栈（Call Stack）：

    • 调用栈是一个 LIFO（后进先出）结构，用于存储当前执行的函数调用。当一个函数被调用时，它会被推入调用栈，当函数执行完毕后，它会从调用栈中弹出。

  2. 任务队列（Task Queue）：

    • 任务队列存储了所有等待执行的任务，这些任务通常是异步操作的回调函数，例如 setTimeout、setInterval、I/O 操作等。当调用栈为空时，事件循环会从任务队列中取出一个任务并将其推入调用栈执行。

  3. 微任务队列（Microtask Queue）：

    • 微任务队列存储了所有等待执行的微任务，这些微任务通常是 Promise 的回调函数、MutationObserver 等。微任务队列的优先级高于任务队列，当调用栈为空时，事件循环会优先处理微任务队列中的所有任务，然后再处理任务队列中的任务。

事件循环的工作原理

事件循环的工作原理可以简化为以下几个步骤：

  1. 执行调用栈中的任务：

    • JavaScript 引擎会从调用栈中取出并执行最顶层的任务，直到调用栈为空。

  2. 处理微任务队列：

    • 当调用栈为空时，事件循环会检查微任务队列。如果微任务队列中有任务，会依次取出并执行，直到微任务队列为空。

  3. 处理任务队列：

    • 当调用栈和微任务队列都为空时，事件循环会检查任务队列。如果任务队列中有任务，会取出一个任务并将其推入调用栈执行。

  4. 重复上述步骤：

    • 事件循环会不断重复上述步骤，确保所有任务都能被及时处理。

示例

以下是一个简单的示例，展示事件循环的工作原理：

console.log('Start');

setTimeout(() => {
    console.log('Timeout callback');
}, 0);

Promise.resolve().then(() => {
    console.log('Promise callback');
});

console.log('End');

输出结果：

Start
End
Promise callback
Timeout callback

解释如下：

  1. 同步任务：首先执行同步任务，console.log('Start') 和 console.log('End') 被推入调用栈并立即执行。
  2. 微任务：Promise.resolve().then 创建了一个微任务，该微任务被推入微任务队列。
  3. 任务：setTimeout 创建了一个任务，该任务被推入任务队列。
  4. 处理微任务：同步任务执行完毕后，调用栈为空，事件循环检查微任务队列并执行所有微任务，因此输出 Promise callback。
  5. 处理任务：微任务队列为空后，事件循环检查任务队列并执行所有任务，因此输出 Timeout callback。

为什么 setTimeout 不准确？

JavaScript 中的 setTimeout 和 setInterval 是基于事件循环和任务队列的，因此它们的执行时间可能会受到以下几个因素的影响，从而导致不准确：

  1. 事件循环机制：

    • JavaScript 是单线程的，所有代码的执行都是在一个事件循环中进行的。事件循环会依次处理任务队列中的任务。
    • 如果前面的任务执行时间较长，或者任务队列中有很多任务，定时器的回调函数就会被延迟执行。

  2. 任务队列的优先级：

    • 浏览器的任务队列有不同的优先级，例如用户交互事件、渲染更新等任务的优先级通常高于 setTimeout 和 setInterval。
    • 这意味着即使定时器到期，如果有其他高优先级任务在执行，定时器的回调函数也会被延迟执行。

  3. JavaScript 引擎的限制：

    • JavaScript 引擎通常会对最小时间间隔进行限制。例如，在浏览器环境中，嵌套的 setTimeout 调用的最小时间间隔通常是 4 毫秒。
    • 这意味着即使你设置了一个非常短的时间间隔，实际执行的时间间隔也可能会比你设置的时间更长。

  4. 系统性能和负载：

    • 系统的性能和当前负载也会影响定时器的准确性。如果系统负载较高，任务的执行时间可能会被进一步延迟。

为了更直观地理解这一点，可以考虑以下示例：

console.log('Start');

setTimeout(() => {
    console.log('Timeout callback');
}, 1000);

const start = Date.now();
while (Date.now() - start < 2000) {
    // 模拟一个耗时2秒的任务
}

console.log('End');

在这个示例中，setTimeout 的回调函数设置为 1 秒后执行，但由于在主线程上有一个耗时 2 秒的任务，导致定时器的回调函数被延迟到这个任务执行完毕后才执行。

因此，实际执行时间会远远超过 1 秒。

实现一个更准确的 setTimeout

为了实现更精确的定时器，可以结合 Date 对象和递归的 setTimeout 来实现更高精度的定时器。

以下是一个实现准时 setTimeout 的例子：

function preciseTimeout(callback, delay) {
    const start = Date.now();

    function loop() {
        const now = Date.now();
        const elapsed = now - start;
        const remaining = delay - elapsed;

        if (remaining <= 0) {
            callback();
        } else {
            setTimeout(loop, remaining);
        }
    }

    setTimeout(loop, delay);
}

// 使用示例
preciseTimeout(() => {
    console.log('This is a precise timeout callback');
}, 1000); // 1秒

在这个实现中：

  1. 获取当前时间 start。
  2. 在 loop 函数中不断计算已经过去的时间 elapsed 和剩余时间 remaining。
  3. 如果剩余时间 remaining 小于等于 0，就调用回调函数 callback。
  4. 如果剩余时间 remaining 大于 0，就使用 setTimeout 递归调用 loop 函数。

这种方法能比直接使用 setTimeout 更精确地执行定时任务。

进一步优化

上面的代码还可以进一步优化，可以考虑使用 requestAnimationFrame 来实现更高精度的定时器。

requestAnimationFrame 是专门为动画设计的，它会在浏览器下一次重绘之前调用指定的回调函数。由于浏览器的重绘通常是每秒 60 次（即每 16.67 毫秒一次），所以使用 requestAnimationFrame 可以实现更高精度的定时器。

以下是使用 requestAnimationFrame 实现的高精度定时器：

function preciseTimeout(callback, delay) {
    const start = Date.now();

    function loop() {
        const now = Date.now();
        const elapsed = now - start;

        if (elapsed >= delay) {
            callback();
        } else {
            requestAnimationFrame(loop);
        }
    }

    requestAnimationFrame(loop);
}

// 使用示例
preciseTimeout(() => {
    console.log('This is a precise timeout callback');
}, 1000); // 1秒

在这个实现中，requestAnimationFrame 会在每次浏览器重绘之前调用 loop 函数，从而实现更高精度的定时器。

实现一个更准确的 setInterval

同样地，我们可以通过结合 Date 对象和递归的 setTimeout 来实现更高精度的 setInterval。以下是一个实现准时 setInterval 的例子：

function preciseInterval(callback, interval) {
    let expected = Date.now() + interval;

    function step() {
        const now = Date.now();
        const drift = now - expected;

        if (drift >= 0) {
            callback();
            expected += interval;
        }

        setTimeout(step, interval - drift);
    }

    setTimeout(step, interval);
}

// 使用示例
preciseInterval(() => {
    console.log('This is a precise interval callback');
}, 1000); // 每秒

在这个实现中：

  1. 设置预期的下一次执行时间 expected。
  2. 在 step 函数中不断计算当前时间 now 和预期时间 expected 之间的偏差 drift。
  3. 如果偏差 drift 大于等于 0，就调用回调函数 callback，并更新预期时间 expected。
  4. 使用 setTimeout 递归调用 step 函数，并根据偏差 drift 调整下一次调用的时间间隔。

进一步优化

为了进一步优化，可以考虑使用 requestAnimationFrame 来实现更高精度的定时器。requestAnimationFrame 是专门为动画设计的，它会在浏览器下一次重绘之前调用指定的回调函数。由于浏览器的重绘通常是每秒 60 次（即每 16.67 毫秒一次），所以使用 requestAnimationFrame 可以实现更高精度的定时器。

那我们使用 requestAnimationFrame 来实现的高精度 setInterval

function preciseSetInterval(callback, interval) {
    let expected = performance.now() + interval;
    function step() {
        const drift = performance.now() - expected;
        if (drift >= 0) {
            callback();
            expected += interval;
        }
        requestAnimationFrame(step);
    }
    requestAnimationFrame(step);
}

// 使用示例
preciseSetInterval(() => {
    console.log('This runs every 2 seconds with higher precision');
}, 2000);

总结

事件循环是 JavaScript 处理异步操作的核心机制，通过调用栈、任务队列和微任务队列的协调工作，实现了非阻塞 I/O 操作。

虽然 setTimeout 的定时精度受到事件循环的影响，但通过结合 Date 对象和递归的 setTimeout，或者使用 requestAnimationFrame，可以实现更为准确的定时器。

标签：now,调用,队列,JavaScript,callback,任务,循环,事件,setTimeout
From： https://www.cnblogs.com/leadingcode/p/18228300

相关文章

  • 微信小程序-声明和绑定事件
    一.概念小程序页面使用的数据在Page（）方法里使用data对象进行声明定义定义好之后，使用{{}}进行绑定声明Page({data:{school:'未发之中',obj:{name:'dadada'},id:1,useChk:true}})绑定<!--使用双括号展示数据--><view>{{scho......
  • Shell阶段10 awk工作原理, 内部变量, 正则/比较/条件/逻辑表达式, 判断语句, 循环语
    AWK什么是awkawk是一个编程语言主要作用:对文本和数据的处理awk处理数据的流程1.扫描文件内容，从上到下进行扫描，按照行进行处理2.寻找匹配到的内容，进行读取到特定的模式中，进行行处理3.行满足指定模式动作，则输出到屏幕上面，不满足丢弃4.接着读取下一行继续处理，接着循环，直......
  • 【Python基础】循环语句（5073字）
    文章目录@[toc]什么是循环Python中的循环方式while循环格式示例运行过程应用while循环嵌套示例1示例2for循环格式示例内置函数range()的用法range(x)range(x,y)range(x,y,z)应用break与continuebreakwhile循环中的break未使用break使用breakfor循环中的breakc......
  • 天津科技-Python程序设计基础-循环结构-5
    编写函数f(m,n)，计算并返回。在主程序中输入m和n，调用函数f()，计算并输出函数值。输入格式：=map(int,input().split())输出格式："{}".format()例如：输入1020输出8426deff(m,n):total=0forxinrange(m,n+1):total+=3*x**2+4*x+1r......
  • 信号量（Semaphore），事件Event(了解)，队列补充，进程池和线程池（重点），协程理论，Greenlet，Gevent模
    Ⅰ信号量（Semaphore）【一】什么是信号量信号量Semahpore（同线程一样）互斥锁：允许在同一时刻只能有一个线程或进程同资源进行修改信号量：允许指定数量的进程或线程对资源进行修改【二】例子比如厕所有3个坑，那最多只允许3个人上厕所，后面的人只能等里面有人出来了才能再进去......
  • C语言-for循环之穷举法练习
    //需求：求出一个偶数纸币需要多少张50元，20元，10元来配合include<stdio.h>intmain(void){intn=0;//存储你输入的数值inti=0;//for循环使用intj=0;intk=0;intw=50;定义50元的数值inte=20;定义20元的数值ints=10;定义10元的数值printf("pleaseente......
  • 大学生HTML期末大作业——HTML+CSS+JavaScript公司网站（自行车）
    HTML+CSS+JS【公司网站】网页设计期末课程大作业web前端开发技术web课程设计网页规划与设计......
  • javaScript基础一
    javaScript系列文章目录文章目录系列文章目录前言一、<script>元素二、语言基础1.1.区分大小写1.2.读入数据1.3注释1.4严格模式(strictmode)三、变量四、数据类型总结前言本文将简单的讲解JavaScript的基础预备知识一、<script>元素将JavaScript插入HTML的主要......
  • C++实现自定义容器类型的范围循环
    先看一下类的设计与实现：classMyStack{public:MyStack()=default;MyStack(int*p,size_tlen):d(p),size(len){}int*begin(){returnd;}int*end(){return&d[size];}private:int*d=nullptr;size_tsize......
  • feapder通过selenium爬取网页数据-用到yield关键字可循环爬取
    importrandomimporttimeimportfeapderfromfeapder.utils.webdriverimportWebDriverfromparselimportSelectorfromfeapder.db.mysqldbimportMysqlDBfromselenium.webdriver.common.byimportByclassTestRender(feapder.AirSpider):db=MysqlDB()__cust......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99