JS【详解】setTimeout 延时（含清除 setTimeout，计时开始时间，0 秒延时解析，多 setTimeout 执行顺序，setTimeout 应用场景，网红面试题）-阿里云开发者社区

JS【详解】setTimeout 延时（含清除 setTimeout，计时开始时间，0 秒延时解析，多 setTimeout 执行顺序，setTimeout 应用场景，网红面试题）

2024-07-05 1356

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

本文涉及的产品

全局流量管理 GTM，标准版 1个月

公共DNS（含HTTPDNS解析），每月1000万次HTTP解析

云解析 DNS，旗舰版 1个月

简介： JS【详解】setTimeout 延时（含清除 setTimeout，计时开始时间，0 秒延时解析，多 setTimeout 执行顺序，setTimeout 应用场景，网红面试题）

setTimeout 简介

setTimeout 是一个 js 内置的函数，用于延时执行代码

参数1：回调函数，延迟一段时间后执行的代码
参数2：延迟的时间，单位是毫秒。（默认为 0 毫秒）
返回值：计时器的ID，是一个整数（例子中的 timer）。

const timer = setTimeout(function() {
    console.log(1); // 3 秒后，打印 1
}, 3000);

清除 setTimeout

clearTimeout(timer); // timer 为计时器的ID

setTimeout 什么时候开始计时？

首先， setTimeout 属于 js 异步任务中的宏任务

如上图可见，宏任务需等待同步任务、微任务、DOM渲染完成后，通过事件轮询触发执行，所以存在复杂异步逻辑时，很难精准预判 setTimeout 的开始计时时间。

逻辑简单的，比较好分析，如

function test() {
  print("开始");

  setTimeout(() => {
    print("执行 setTimeout");
  }, 1000);

  print("结束");
}

setTimeout 从打印 “结束” 后开始计时
从计时开始 1 秒后，打印 “ 执行 setTimeout ”

下方代码可以展示得更清晰：

function print(info) {
  let dt = new Date();
  var y = dt.getFullYear();
  var mt = dt.getMonth() + 1;
  var day = dt.getDate();
  var h = dt.getHours(); //获取时
  var m = dt.getMinutes(); //获取分
  var s = dt.getSeconds(); //获取秒
  let str =
    "当前时间：" +
    y +
    "年" +
    mt +
    "月" +
    day +
    "日" +
    h +
    "时" +
    m +
    "分" +
    s +
    "秒";

  console.log(info + "————" + str);
}

function sleep(delay) {
  var start = new Date().getTime();
  while (new Date().getTime() - start < delay) {
    continue;
  }
  print("sleep 执行完毕");
}

function test() {
  print("开始");

  sleep(1000);

  setTimeout(() => {
    print("执行 setTimeout");
  }, 1000);

  print("结束");
}

test();

执行结果

开始————当前时间：2024年5月29日14时11分23秒
sleep 执行完毕————当前时间：2024年5月29日14时11分24秒
结束————当前时间：2024年5月29日14时11分24秒
执行 setTimeout————当前时间：2024年5月29日14时11分25秒

0 秒延时并不代表立即执行！

print("同步任务执行开始");

setTimeout(function () {
  print("setTimeout延时0秒执行");
}, 0);

print("同步任务执行结束");

一旦添加了 setTimeout ，便是一个异步宏任务，需等同步任务、异步微任务、DOM渲染完成后，通过事件轮询触发执行。

多个 setTimeout 的执行顺序？

function test() {
  console.time("本段代码总耗时");

  print("同步任务执行开始");

  setTimeout(function () {
    print("setTimeout延时3秒执行");
    console.timeEnd("本段代码总耗时");
  }, 3000);

  setTimeout(function () {
    print("第1个setTimeout延时2秒执行");
  }, 2000);

  setTimeout(function () {
    print("第2个setTimeout延时2秒执行");
  }, 2000);

  print("同步任务执行结束");
}

test();

执行结果

同步任务执行开始————当前时间：2024年5月29日14时21分20秒
同步任务执行结束————当前时间：2024年5月29日14时21分20秒
第1个setTimeout延时2秒执行————当前时间：2024年5月29日14时21分22秒
第2个setTimeout延时2秒执行————当前时间：2024年5月29日14时21分22秒
setTimeout延时3秒执行————当前时间：2024年5月29日14时21分23秒
本段代码总耗时: 3.005s

所有 setTimeout 的开始计时时间几乎相同
延时相同的 setTimeout ，会按 setTimeout 的出现的先后顺序执行
延时不同的 setTimeout ，延时越久的 setTimeout 越晚执行

setTimeout 的应用场景

5秒后关闭网页两侧的广告栏

window.onload = function () {
    //获取相关元素
    var imgArr = document.getElementsByTagName("img");
    //设置定时器：5秒后关闭两侧的广告栏
    setTimeout(fn,5000);
    function fn(){
        imgArr[0].style.display = "none";
        imgArr[1].style.display = "none";
    }
}

setTimeout 的网红面试题

下方代码的执行结果是？

for (var i = 0; i < 10; i++) {
  setTimeout(() => {
    console.log(i);
  });
}

答案

解析：

setTimeout 是异步宏任务，for 循环是同步任务，for 循环先执行，依次在Web APIs 中添加了10个setTimeout，待 for 循环完毕，i 的值已变为 10 ，此时才开始事件轮询，setTimeout 依次开始计时，因延时为0秒，最终效果为 for 循环完毕后，立马一次执行 10 次 setTimeout 的回调，即依次打印 10 个 10

延展提问：怎样改动实现打印 0 到 9 ？

答案1：将 var 改成 let

for (let i = 0; i < 10; i++) {
  setTimeout(() => {
    console.log(i);
  });
}

解析：let 声明的变量具有局部作用域， var 声明的变量是全局作用域，改用 let 后，执行 setTimeout 内的回调函数时，取到的 i 值为 setTimeout 被放入 Web APIs 时的值，即 for 循环时 i 的值。

答案2：改用立即执行函数包裹

for (var i = 0; i < 10; i++) {
  (function (i) {
    setTimeout(() => {
      console.log(i);
    });
  })(i);
}

JS【详解】setTimeout 延时（含清除 setTimeout，计时开始时间，0 秒延时解析，多 setTimeout 执行顺序，setTimeout 应用场景，网红面试题）

setTimeout 简介

清除 setTimeout

setTimeout 什么时候开始计时？

0 秒延时并不代表立即执行！

多个 setTimeout 的执行顺序？

setTimeout 的应用场景

5秒后关闭网页两侧的广告栏

setTimeout 的网红面试题

下方代码的执行结果是？

延展提问：怎样改动实现打印 0 到 9 ？

答案1：将 var 改成 let

答案2：改用立即执行函数包裹

热门文章

最新文章

相关课程

相关电子书

相关实验场景

推荐镜像

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

JS【详解】setTimeout 延时（含清除 setTimeout，计时开始时间，0 秒延时解析，多 setTimeout 执行顺序，setTimeout 应用场景，网红面试题）

setTimeout 简介

清除 setTimeout

setTimeout 什么时候开始计时？

0 秒延时并不代表立即执行！

多个 setTimeout 的执行顺序 ？

setTimeout 的应用场景

5秒后关闭网页两侧的广告栏

setTimeout 的网红面试题

下方代码的执行结果是？

延展提问：怎样改动实现打印 0 到 9 ？

答案1：将 var 改成 let

答案2：改用立即执行函数包裹

热门文章

最新文章

相关课程

相关电子书

相关实验场景

推荐镜像

多个 setTimeout 的执行顺序？