html页面退出关闭定时器,JavaScript设置定时器、取消定时器及执行机制解析

今天整理了一下 JavaScript 定时器，顺便了解了一下 JavaScript 的运行机制，现在记录一下。

JavaScript 执行机制

浏览器( JavaScript 引擎)执行 JavaScript 的机制是基于事件循环的。由于 JavaScript 是单线程，同一时间只能执行一个任务。为了避免某些长时间任务造成无意义等待，JavaScript 引入了异步概念。

同步任务直接在主线程队列中顺序执行，而异步任务会进入另一个任务队列，不会阻塞主线程。等到主线程队列空了(执行完了)的时候，就会去异步队列查询是否有可执行的异步任务了(异步任务通常进入异步队列之后还要等一些条件才能执行，如 ajax 请求、文件读写)，如果某个异步任务可以执行了便加入主线程队列，以此循环。

JavaScript 定时器

定时器也是一种异步任务，通常浏览器都有一个独立的定时器模块，定时器的延迟时间就由定时器模块来管理，当某个定时器到了可执行状态，就会被加入主线程队列。

了解了上面的执行机制，我们不难理解 JavaScript 定时器不是绝对精准的，延迟的时间严格来说总是大于我们设定的时间的，至于大多少就要看当时 JavaScript 的执行情况了。

另外，多个定时器如不及时清除(clearTimeout())，会造成干扰，使延迟时间更加捉摸不透。所以，不管定时器有没有执行完，要及时清除不需要的定时器。

下面来介绍几个常用的 JavaScript 定时器：

setTimeout()

设置一个定时器，在定时器到期后执行一次函数或代码段：setTimeout(fn, x) 表示延迟 x 毫秒之后执行 fn 。var timeoutId = setTimeout(code, delay, param1, param2, ...)

var timeoutId = setTimeout(func, delay, param1, param2, ...)

timeoutId 定时器ID

func 延迟后执行的函数

code 延迟后执行的代码字符串，不推荐使用原理类似eval()

delay 延迟的时间(单位：毫秒)，默认值为0

<