极客笔记JS 延迟执行
在编写 JavaScript 代码时，有时候我们希望某段代码在一定的延迟时间后再执行，这就涉及到了延迟执行的概念。延迟执行在 Web 开发中是一个常见的需求，比如在用户点击按钮后等待一段时间再执行某个操作，或者在页面加载完成后延迟执行某些初始化操作等。本文将详细介绍在 JavaScript 中如何实现延迟执行。
setTimeout 函数
在 JavaScript 中可以使用 setTimeout 函数来实现延迟执行。setTimeout 函数接受两个参数，第一个参数是要执行的函数或要执行的代码块，第二个参数是延迟的时间（单位是毫秒）。下面是一个简单的示例代码：
function sayHello() {
console.log('Hello, World!');
}
setTimeout(sayHello, 2000); // 2000 毫秒后执行 sayHello 函数
上面的代码中，定义了一个 sayHello 函数，然后使用 setTimeout 函数将其延迟 2000 毫秒（即 2 秒）执行。当 2 秒过去后，控制台会输出 Hello, World!。
需要注意的是，setTimeout 函数并不是严格意义上的延迟执行，而是在指定延迟时间后将任务添加到任务队列中等待执行。因此，实际上并不能保证在延迟时间结束后立即执行，而是在任务队列中的其他任务执行完毕后才会执行。
clearTimeout 函数
有时候我们可能需要取消已经设置的延迟执行任务，在这种情况下可以使用 clearTimeout 函数。clearTimeout 函数接受一个参数，即 setTimeout 返回的定时器 ID。以下是一个示例：
function sayHello() {
console.log('Hello, World!');
}
let timerId = setTimeout(sayHello, 2000);
// 取消延迟执行
clearTimeout(timerId);
上面的代码中，首先设置了一个延迟执行任务，并将返回的定时器 ID 存储在 timerId 变量中。然后通过调用 clearTimeout 函数并传入该定时器 ID 来取消已设置的延迟执行任务。
setInterval 函数
除了 setTimeout 函数外，JavaScript 还提供了 setInterval 函数可以实现间隔一定时间重复执行某个任务。setInterval 函数也接受两个参数，第一个参数是要执行的函数或代码块，第二个参数是执行的时间间隔（单位是毫秒）。下面是一个示例：
function sayHello() {
console.log('Hello, World!');
}
setInterval(sayHello, 1000); // 每隔 1 秒执行一次 sayHello 函数
上面的代码中，定义了一个 sayHello 函数，然后使用 setInterval 函数将其每隔 1 秒执行一次。当代码运行后，控制台会每隔 1 秒输出一次 Hello, World!。
与 setTimeout 类似，setInterval 函数也是将任务添加到任务队列中等待执行，并不能保证在时间间隔结束后立即执行，而是等待任务队列中的其他任务执行完毕后才会执行。
clearInterval 函数
与 clearTimeout 函数类似，setInterval 设置的重复执行任务也可以通过 clearInterval 函数来取消。clearInterval 函数接受一个参数，即 setInterval 返回的定时器 ID。以下是一个示例：
function sayHello() {
console.log('Hello, World!');
}
let timerId = setInterval(sayHello, 1000);
// 取消重复执行
clearInterval(timerId);
上面的代码中，首先设置了一个每隔 1 秒执行一次的任务，并将返回的定时器 ID 存储在 timerId 变量中。然后通过调用 clearInterval 函数并传入该定时器 ID 来取消已设置的重复执行任务。
使用匿名函数
除了传入具名函数外，还可以直接传入匿名函数来实现延迟执行。这样更加简洁直观。以下是一个示例：
setTimeout(function() {
console.log('This is an anonymous function.');
}, 3000);
上面的代码中，直接传入了一个匿名函数给 setTimeout 函数，实现了延迟执行任务。在实际开发中，根据需求来选择使用匿名函数或具名函数。
Promise 和 async/await
ES6 引入了 Promise 对象和 async/await 语法，用来简化异步操作的处理。通过 Promise 和 async/await 可以更加优雅地实现延迟执行任务。以下是一个使用 Promise 的延迟执行示例：
const delay = ms => new Promise(resolve => setTimeout(resolve, ms));
delay(2000).then(() => console.log('Delayed task executed after 2 seconds.'));
上面的代码中，定义了一个 delay 函数返回一个 Promise 对象，实现了延迟执行任务的功能。然后通过 then 方法来处理延迟执行后的任务。
而使用 async/await 则更加简洁：
const delay = ms => new Promise(resolve => setTimeout(resolve, ms));
async function delayedTask() {
await delay(2000);
console.log('Delayed task executed after 2 seconds.');
}
delayedTask();
上面的代码中，定义了一个 delayedTask 函数，通过使用 await 关键字等待 delay 函数执行完成后再执行后续代码，实现了延迟执行任务的效果。
总结
在 JavaScript 中实现延迟执行可以通过 setTimeout 和 setInterval 函数，也可以结合 Promise 对象和 async/await 语法进行优雅的处理。延迟执行在实际的 Web 开发中是非常常见的需求，掌握延迟执行的方法能帮助我们更好地处理异步操作，提高代码的可读性和可维护性。