JavaScript定时器

梦里梦外; 2023-08-17 17:45 91阅读 0赞

## JavaScript定时器 ##

### 思考 ###

在讨论之前，先来思考一个问题，定时器真的是定时执行的么？

首先来看一段代码：

console.log('定时器启动前')
    var start = Date.now()
    setTimeout(function () { 
      console.log('定时器执行了', Date.now()-start);
    }, 200)
    
    console.log('定时器启动后');

将代码运行几次，输出不同的时间结果，你可以手动测试一下

![在这里插入图片描述][20191002133603651.png]

![在这里插入图片描述][20191002133613474.png]

可以看到，定时器一般是会延迟一些的，但这是可以接受的。

但是如果运行下面的代码，定时器将会延迟很长时间执行。

setTimeout(function () { 
      console.log('定时器执行了', Date.now()-start);
    }, 200)
    
    console.log('定时器启动后');
    
    // 循环多次
    for (let i = 0; i < 1000000000; i++) { 
    }

上面的代码的输出结果如下：

![在这里插入图片描述][20191002133626676.png]

可以看到，定时器延时了很长时间才执行完毕。

--------------------

上面定时器出现延时的原因是因为js是单线程的，所以JavaScript中的定时器是运行在主线程。而当有其他耗时任务执行时，定时器则会延迟。

### JavaScript引擎执行代码的基本流程 ###

由上面的代码可以得出，JavaScript引擎执行代码的基本流程如下

1.  先执行初始化代码

*  设置定时器
 *  绑定监听
 *  发送ajax请求

1.  之后才会执行回调函数

[20191002133603651.png]: /images/20230808/e67c884484f24dca88e3446008187cc1.png
[20191002133613474.png]: /images/20230808/cb9fedcc718e4b03a00b7915e6b2b5ed.png
[20191002133626676.png]: /images/20230808/7a1ee19a3a244ce88f4574edfc8275e1.png

发表评论取消回复

表情：

评论列表（有 0 条评论，91人围观）

还没有评论，来说两句吧...

相关阅读

相关 JavaScript定时器

JavaScript定时器思考在讨论之前，先来思考一个问题，定时器真的是定时执行的么？首先来看一段代码： console.log('定时器启动前'

梦里梦外;/ 2023年08月17日 17:45/ 0 赞/ 92 阅读

相关 JavaScript定时器

time = setInterval(“showAd()”,3000); 每隔3000毫秒执行一次showAd()方法 clearInterval(time); 清除定时操

约定不等于承诺〃/ 2023年06月08日 06:56/ 0 赞/ 13 阅读

相关 JavaScript定时器

文章目录定时器数码时钟延时提示框无缝滑动定时器参考视频：[JavaScript从入门到精通 —

女爷i/ 2023年02月24日 08:29/ 0 赞/ 22 阅读

相关 [JavaScript-4] 定时器

1. 定时器的介绍定时器就是在一段特定的时间后执行某段程序代码。 2. 定时器的使用： js 定时器有两种创建方式： 1. setTimeout(func\

太过爱你忘了你带给我的痛/ 2022年11月26日 05:59/ 0 赞/ 172 阅读

相关 JavaScript定时器解密

在[单线程JavaScript][JavaScript]这篇文章中,在介绍JavaScript单线程的同时，也介绍了setTimeout是如何工作的。但是对于定时器的一些内容，

╰+哭是因爲堅強的太久メ/ 2022年09月27日 06:42/ 0 赞/ 138 阅读

相关 JavaScript定时器示例

JavaScript定时器示例在前端，我们有很多功能需要用到定时器（Timing）。譬如轮询，譬如定时关闭弹框，譬如实现秒表，譬如一段时间后跳转页面等等。因此，我们需要

绝地灬酷狼/ 2022年09月14日 02:27/ 0 赞/ 183 阅读

相关 Javascript-定时器

方法1： setInterval( function ()\{\}, time) ; setInterval有俩个参数，前面一个表示执行的语句，后面一个表示间隔的时间（单位

落日映苍穹つ/ 2022年05月27日 13:47/ 0 赞/ 214 阅读

相关 JavaScript 定时器

JavaScript 里有定时器 setInterval(fun,time) / clearInterval() ; 延时器 setTimeout(fun,time) /

谁借莪１个温暖的怀抱￠/ 2022年05月17日 11:40/ 0 赞/ 184 阅读

相关 JavaScript定时器

JavaScript定时器原链接https://www.runoob.com/w3cnote/js-timer.html js定时器有一下两种方法： setInt

短命女/ 2022年01月31日 04:59/ 0 赞/ 210 阅读

相关【JavaScript 】定时器开关事件

![在这里插入图片描述][20190428142233854.png] -------------------- <!DOCTYPE html> <html

Bertha 。/ 2021年10月19日 11:40/ 0 赞/ 298 阅读