【Javascript】setTimeout详解

setTimeout 是 JavaScript 中的一个非常有用的函数，用于安排一段代码在指定的时间延迟之后执行一次。它属于全局对象 window（在浏览器环境中）或 global（在 Node.js 环境中），因此可以直接调用它而无需引用任何特定的对象。

基本语法
setTimeout 的基本语法如下：

setTimeout(function, delay, [arg1, arg2, ...]);

• function: 一个函数或可调用对象，将在指定的延迟后执行。
• delay: 一个整数，表示延迟的时间（以毫秒为单位）。例如，1000 表示 1 秒。
• arg1, arg2, ...: 可选参数，可以传递给回调函数的参数。

返回值：
setTimeout 函数返回一个 number 类型的值，代表定时器的标识符。这个标识符可以用于取消定时器。

示例：
下面是一个简单的示例，展示了如何使用 setTimeout：

function sayHello() {
  console.log('Hello!');
}

// 在 2 秒后执行 sayHello 函数
setTimeout(sayHello, 2000);

// 或者使用箭头函数
setTimeout(() => console.log('Hello!'), 2000);

传递参数
您还可以向回调函数传递参数：

setTimeout(function(message) {
  console.log(message);
}, 2000, 'Hello!');

// 或者使用箭头函数
setTimeout(message => console.log(message), 2000, 'Hello!');

取消定时器
如果您想取消定时器，可以使用 clearTimeout 函数，并传入 setTimeout 返回的标识符：

let timerId = setTimeout(() => console.log('Hello!'), 2000);

// 取消定时器
clearTimeout(timerId);

备注：
1、异步行为:
setTimeout 是非阻塞的，这意味着在回调函数执行之前，JavaScript 会继续执行其他任务。
2、延迟的准确性:
实际的延迟时间可能比指定的时间长，这是因为 JavaScript 引擎的调度机制。
3、重复执行:
如果您希望重复执行某个操作，可以使用 setInterval。
4、作用域问题:
当使用函数表达式或箭头函数时，要注意作用域问题。箭头函数不会创建自己的 this 上下文，而是继承外部作用域的 this。
5、浏览器限制:
在浏览器环境中，setTimeout 的最小延迟时间为 4 毫秒（即使您设置了小于 4 毫秒的延迟时间，它也会至少等待 4 毫秒）。

示例：取消定时器

let timerId;

function startTimer() {
  timerId = setTimeout(() => {
    console.log('Timer completed!');
  }, 3000);
}

function cancelTimer() {
  clearTimeout(timerId);
  console.log('Timer canceled!');
}

startTimer();
setTimeout(cancelTimer, 1000); // 在 1 秒后取消定时器

setTimeout 是一个非常强大的工具，可以用来实现各种计时功能。它允许您安排代码的执行，这对于构建延时触发的事件、动画等都非常有用。理解 setTimeout 的工作原理可以帮助您更好地编写 JavaScript 应用程序。