JavaScript 定时器详解：setTimeout 与 setInterval 用法及异步机制

定时器

在 JavaScript 开发中，主要存在两种类型的定时器机制：倒计时定时器（Timeout）和间隔定时器（Interval）。

倒计时定时器通常被称为一次性定时器或延时定时器，用于在指定时间后触发一次操作。

间隔定时器则被称为间歇定时器或反复性定时器，用于按照固定时间间隔重复执行操作。

倒计时定时器

其核心功能是设定一个时间阈值，到达该时间后执行指定的回调函数。

基本语法结构为：setTimeout(要执行的函数，多长时间以后执行)，其中第一个参数为回调函数，第二个参数为延迟时间。

当设定的时间到达后，浏览器会执行传入的函数逻辑。

var timerId = setTimeout(function () {
  console.log('我执行了')//1秒后执行我执行了 只执行一次
}, 1000)
console.log(timerId) // 1 这个1说明页面上只有一个定时器

时间单位统一采用毫秒（ms）计算，例如 1000 毫秒等同于 1 秒钟。

因此，若设置时间为 1000，函数将在页面加载或代码运行 1 秒后执行。

该定时器仅执行一次，执行完毕后即自动销毁，不会再次触发。

调用 setTimeout 会返回一个数值类型的 ID，该 ID 标识当前页面中已创建的定时器序号。

间隔定时器

其功能是在设定的时间间隔后反复执行指定的回调函数，直到被手动清除。

基本语法结构为：setInterval(要执行的函数，间隔多少时间)，参数含义与 setTimeout 类似。

var timerId = setInterval(function() {
    console.log('我执行了')//间隔1秒执行一次 我执行了
}, 1000)
console.log(timerId);//1  这个1说明页面上只有一个定时器

时间计算方式相同，均以毫秒为单位进行换算。

例如设置间隔为 1000 毫秒，则函数会每 1 秒执行一次。

只要未通过 clearInterval 主动关闭或停止，该定时器将无限期持续执行。

与倒计时定时器一样，setInterval 也返回一个数字类型的 ID，用于标识当前页面中的定时器序列号。

定时器的返回值

无论是设置 setTimeout 还是 setInterval，其返回值均包含部分相同的特性，即返回一个数字 ID。

只要页面中存在至少一个活跃的定时器，返回值就是一个非零的数字，代表该定时器的唯一标识。

var timerId = setTimeout(function () {
  console.log('倒计时定时器')
}, 1000)
var timerId2 = setInterval(function () {
  console.log('间隔定时器')
}, 1000)
console.log(timerId) // 1
console.log(timerId2) // 2

js的异步代码执行机制

同步

同步代码按照从上到下的顺序依次执行，只有当前行代码执行完毕后，下一行代码才会开始执行。

异步

当 JavaScript 引擎遇到异步代码时，会将其从主执行栈中取出，放入异步任务队列中等待，暂时不立即执行。

由于 JavaScript 是单线程语言，同一时刻只能处理一个任务，因此需要借助异步机制来避免阻塞。

同步和异步的执行时间

同步代码具有最高优先级，必须优先执行完毕，随后引擎才会去处理异步代码。

异步代码在宿主环境（如浏览器）中执行，执行完毕后其结果或回调会被放入任务队列（Task Queue）中。

当同步代码全部执行完毕后，时间循环机制（Event Loop）会检查任务队列，并调用其中的异步回调。

这些异步任务会被依次添加到执行栈中，由主线程进行执行。

console.log('start')  // start  第一打印出來的
setTimeout(function() {
    console.log('timeout') //timeout  最后打印出來的
}, 0)
console.log('end')//end  第二打印出來的

以上就是JavaScript倒计时定时器和间隔定时器使用详解的详细内容，更多关于JavaScript定时器的资料请关注本站其它相关文章！