JS 中的定时器 setTimeout()

最新推荐文章于 2025-07-21 13:01:13 发布

原创最新推荐文章于 2025-07-21 13:01:13 发布 · 3.6w 阅读

32 ·

CC 4.0 BY-SA版权

文章标签：

#JS #超时调用

JavaScript 专栏收录该内容

24 篇文章

订阅专栏

本文详细介绍了JavaScript中的setTimeout函数，包括其参数、使用方式及注意事项，并探讨了任务队列的概念以及如何取消超时调用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

setTimeout()接受两个参数：要执行的代码和以毫秒表示的时间。第一个参数可以是一个包含JS代码的字符串（和在eval()函数中使用的字符串一样），也可以是一个函数。如下：

//不建议传递字符串
setTimeout("alert('hello')", 1000);
//推荐的方式
setTimeout(function () {
  alert("hello");
}, 1000);

即使两种方法都可以实现，但由于传递字符串可能导致性能损失，因此建议第一个参数为函数。

任务队列：

JS是一个单线程序的解释器，一段时间内只能执行一段代码，因此就有了一个JS任务队列。这些任务会被按照它们添加到队列的顺序执行。如下：

function btn () {
    setTimeout(function () {
        for (let i=0; i<99999; i++) console.log(i);
    },980);
    setTimeout(function () {
        console.log("2");
    },1000)
}

可以看出，如果队列是空的，则添加的代码会立即执行，否则，就要等前面的代码执行完后再执行。

看下面的例子：

function btn () {
    console.log(111);
    setTimeout(function () {console.log(222)}, 2000);
    setTimeout(function () {console.log(333)}, 0);
    console.log(444);
}

输出结果：

即使设置时间为0，但它仍然要排队，直到函数中其它非延迟语句被执行完毕后才开始执行队列中的代码。所以“333”在“444”后面。

取消调用：

setTimeout()会返回一个数值ID，这个ID为计划执行代码的唯一标识符，可以用它来取消超时调用。

取消尚未执行的超时调用计划，用clearTimeout()方法。如下：

var timeId = null;
timeId = setTimeout(function () {alert("okok")}, 2000);
clearTimeout(timeId);

任务并未执行便被取消。