JavaScript 中的 setTimeout 函数是执行异步定时任务的重要工具。通过它，开发者可以安排代码在指定的时间后执行。本文将详细介绍 setTimeout 的使用方法、常见用法、性能优化技巧以及如何避免常见的陷阱。

基本用法

setTimeout 函数接受两个参数：一个是要执行的函数或可执行的代码字符串，另一个是延迟执行的毫秒数。

setTimeout(function() {
    console.log('Hello, world!');
}, 1000); // 1秒后执行

上述代码将在1秒后输出 “Hello, world!” 到控制台。

传递多个参数

除了第一个参数（要执行的函数），setTimeout 还可以接受一个参数对象，用于传递额外的参数给要执行的函数。

setTimeout(function(message, name) {
    console.log(message, name);
}, 1000, 'Hello', 'world!');

上述代码将在1秒后输出 “Hello world!“。

清除定时器

如果需要取消已经设置的定时器，可以使用 clearTimeout 函数。

var timerId = setTimeout(function() {
    console.log('Timer expired!');
}, 1000);

clearTimeout(timerId);

上述代码中，定时器在设置后立即被取消，因此不会执行。

常见用法

循环定时器

循环定时器常用于实现定时重复执行的任务。

var timerId = setInterval(function() {
    console.log('Timer tick!');
}, 1000);

// 可以通过setTimeout清除
clearTimeout(timerId);

延迟函数执行

在某些情况下，你可能需要在函数执行前进行一些检查或准备。

function performAction() {
    console.log('Action performed!');
}

setTimeout(performAction, 1000);

异步加载资源

function loadImage(url) {
    var img = new Image();
    img.onload = function() {
        document.body.appendChild(img);
    };
    img.src = url;
}

loadImage('path/to/image.png');

性能优化技巧

  1. 避免长时间运行的定时器：长时间运行的定时器可能会阻塞浏览器执行其他任务，如响应用户交互。如果可能，尽量将长时间运行的定时器分解为多个短时间定时器。
  2. 使用 requestAnimationFrame：对于动画和频繁的UI更新，使用 requestAnimationFrame 可以提供更好的性能和更平滑的动画效果。
  3. 减少不必要的重复定时器：如果已经有一个定时器在运行，不要设置另一个相同的定时器，这可能会导致不必要的性能开销。

避免的陷阱

  1. 定时器延迟不准确：setTimeout 的延迟时间是理论上的，但实际执行时间可能会因为浏览器或其他系统资源的占用而有所不同。
  2. 嵌套定时器：嵌套定时器（即一个定时器中再次设置定时器）可能导致难以追踪的代码逻辑，增加出错概率。
  3. 内存泄漏：忘记清除定时器可能导致内存泄漏，特别是在循环定时器中。

通过了解 setTimeout 的基本用法、常见用法、性能优化技巧以及避免的陷阱，你可以更有效地利用这个强大的JavaScript工具来处理异步定时任务。