JavaScript - setTimeout的原理及在JavaScript线程执行队列中的位置

悠悠 2021-09-29 03:48 148阅读 0赞

### 定义和用法 ###

setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。

### 语法 ###

setTimeout(() => {
    // code
    },millisec)

**提示**：setTimeout() 只执行 code 一次。如果要多次调用，请使用 setInterval() 或者让 code 自身再次调用 setTimeout()。

### JavaScirpt线程 ###

先了解下浏览器，浏览器是多线程的。  
        JavaScript引擎线程  
        界面渲染线程  
        浏览器事件触发线程  
        Http请求线程  
    `JS运行在浏览器中，是单线程的`，每个window一个JS引擎线程。既然是单线程的，的在某个特定的时刻只有特定代码能被执够行，并阻塞其它的代码。（至于ajax的实现这里就不说了。）

### timeout 原理 ###

setTimeout的简单的原理：  
    setTimeout调用的时候，JavaScript引擎会启动定时器timer，大约millisec(ms)以后执行code，当定时器时间到，就把该事件放到主事件队列等待处理。

**注意**：  
    浏览器JavaScript线程空闲的时候才会真正执行  
    为什么呢？因为当JavaScript线程的正在出来其他JavaScript代码时，其实以已经阻塞了其他的代码，其中包括的setTimeout的定时器部分的实现。

millisec参数有什么用？  
    上诉测试发现，实际应用中。setTimeout的millisec参数不管你设置多少，实际执行都是在线程的最后，因为在执行一个操作的时候，JavaScript肯定是一直把代码执行完后再走setTimeout绑定的code的。

那么问题来了。在没有时间要求限制时，`setTimeout(handler,0)`和`setTimeout(handler,100)`在单独使用时，好像并没有区别。

millisec一般在多个setTimeout一起使用的时，需要区分哪个先加入到队列的时候才有用，否则都可以设置成`setTimeout(handler,0)`

发表评论取消回复

表情：

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

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

相关阅读

相关 JavaScript的线程

JavaScript的线程 > JavaScript是单线程运行的，但是可以通过H5中的Web Workders可以实现多线程运行如何证明js执行是单线程的先

淩亂°似流年/ 2023年08月17日 17:45/ 0 赞/ 60 阅读

相关 javascript中定时执行的方法setinterval()和settimeout()和clearinterval()

Document自带的方法：循环执行：var timeid = window.setInterval（“方法名或方法”，“延时”）; window.clearIn

ゝ一世哀愁。/ 2022年12月31日 14:22/ 0 赞/ 101 阅读

相关在JavaScript中实现队列

> 描述队列数据结构，其具有的操作以及展示JavaScript中的队列实现 1. 队列数据结构队列是一种“先入先出”（FIFO）数据结构的类型。第一个入队项目（

冷不防/ 2022年10月14日 12:53/ 0 赞/ 85 阅读

相关 Javascript: setTimeout()使用及 setInterval()使用

Evaluates an expression after a specified number of milliseconds has elapsed. (在指定时间过后执

﹏ヽ暗。殇╰゛Y/ 2022年09月27日 03:56/ 0 赞/ 115 阅读

相关 JavaScript的计时器的工作原理（setTimeout/setInterval）

原文链接： [http://segmentfault.com/a/1190000002633108][http_segmentfault.com_a_11900000026

ゝ一世哀愁。/ 2022年08月22日 01:29/ 0 赞/ 165 阅读

相关 JavaScript单线程及setTimeOut异步的应用

一、js同步与异步在JavaScript中任务有两种，一种是同步任务，一种是异步任务。同步任务：各个任务按照文档定义的顺序一一推入"执行栈"中，当前一个任务执行完毕

叁歲伎倆/ 2022年05月11日 02:22/ 0 赞/ 161 阅读

相关 JavaScript中的setInterval()和setTimeout()

1.setlnterval() setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。 setInterval() 方法会不停地调用函数，直到

水深无声/ 2022年04月05日 03:50/ 0 赞/ 211 阅读

相关关于javascript在html中的位置

//转发自https://www.cnblogs.com/zrl66/p/6046526.html 关于javascript放在哪里更合适脚本位置：例如以下代

野性酷女/ 2022年03月27日 11:58/ 0 赞/ 175 阅读

相关 JavaScript - setTimeout的原理及在JavaScript线程执行队列中的位置

定义和用法 setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。语法 setTimeout(() => { // code

悠悠/ 2021年09月29日 03:48/ 0 赞/ 149 阅读

相关 javascript线程及与线程有关的性能优化

友情链接 [一篇很好的帮你理解javascript events loop的文章][javascript events loop] 声明这些内容都是按我自己的理

古城微笑少年丶/ 2021年06月26日 16:06/ 0 赞/ 280 阅读