掌握setTimeout回调，轻松实现JavaScript异步编程技巧

在 JavaScript 中，异步编程是一种常用的编程范式，它允许代码在没有阻塞主线程的情况下执行。setTimeout 是 JavaScript 中实现异步编程的一个非常基础且常用的函数。通过理解和使用 setTimeout，我们可以更好地掌握 JavaScript 的异步编程技巧。

什么是 setTimeout？

setTimeout 函数允许你在指定的毫秒数后执行一个函数。这个函数通常被称为回调函数，因为它是延迟执行的。setTimeout 的基本语法如下：

setTimeout(function() {
  // 要执行的代码
}, milliseconds);

这里的 milliseconds 是一个数值，表示延迟执行的毫秒数。例如，setTimeout(function() { console.log('Hello, World!'); }, 1000); 将会在 1 秒后打印出 “Hello, World!“。

使用 setTimeout 实现异步操作

异步编程的关键在于能够将耗时操作放在不影响主线程的地方执行。以下是一些使用 setTimeout 实现异步操作的例子：

1. 简单的异步延时

setTimeout(function() {
  console.log('延时执行');
}, 2000);

console.log('立即执行');

在这个例子中，虽然第一个 console.log 看起来会先执行，但实际上第二个 console.log 会在 2 秒后执行，因为 setTimeout 回调会在 2 秒后执行。

2. 定时器循环

我们可以使用 setTimeout 创建一个简单的定时器循环：

function repeat() {
  console.log('重复执行');
  setTimeout(repeat, 2000);
}

repeat();

这段代码将会每 2 秒打印一次 “重复执行”。

3. 异步处理耗时操作

在处理耗时操作时，我们可以使用 setTimeout 来避免阻塞主线程：

function heavyComputation() {
  // 模拟耗时操作
  for (let i = 0; i < 1000000000; i++) {}
  console.log('耗时操作完成');
}

setTimeout(heavyComputation, 0);
console.log('主线程继续执行');

在这个例子中，heavyComputation 函数将在主线程继续执行其他任务后异步执行。

高级技巧：setTimeout 与 clearTimeout

1. 清除定时器

clearTimeout 函数可以取消通过 setTimeout 设置的延迟执行：

let timeoutId = setTimeout(function() {
  console.log('定时器执行');
}, 3000);

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

2. 控制多个定时器

通过保存定时器的引用，我们可以控制多个定时器，比如启动、停止或重置：

let timeoutId1 = setTimeout(function() {
  console.log('定时器 1 执行');
}, 2000);

let timeoutId2 = setTimeout(function() {
  console.log('定时器 2 执行');
}, 4000);

// 停止定时器 1
clearTimeout(timeoutId1);

// 重置定时器 2
timeoutId2 = setTimeout(function() {
  console.log('定时器 2 重置');
}, 4000);

总结

setTimeout 是 JavaScript 异步编程中的一个重要工具。通过理解和使用 setTimeout，我们可以更好地处理耗时操作，避免阻塞主线程，从而提高应用性能。掌握这些技巧，将使你在 JavaScript 编程的道路上更加得心应手。