极客笔记js 延时函数
在前端开发中，经常会遇到需要延时执行一段代码的情况，这时候就需要用到延时函数。延时函数是一种可以让代码在一定时间后执行的方法，常用于处理一些需要等待的操作和动画效果。
在JavaScript中，我们可以使用setTimeout和setInterval这两个函数来实现延时执行的功能。本文将详细介绍这两个函数的用法，以及它们之间的区别和注意事项。
setTimeout 函数
setTimeout函数可以让我们在指定的时间后执行一段代码。它接受两个参数，第一个参数是要执行的函数或要执行的代码块，第二个参数是延时的时间（以毫秒为单位）。
// 使用 setTimeout 延时执行一个函数
setTimeout(function() {
console.log('延时执行的函数');
}, 1000);
// 使用 setTimeout 延时执行一段代码块
setTimeout(() => {
console.log('延时执行的代码块');
}, 2000);
上面的示例中，第一个setTimeout函数在延时1秒后执行一个函数，第二个setTimeout函数在延时2秒后执行一段代码块。
取消 setTimeout
有时候我们可能需要在某个条件下取消setTimeout的执行，这时可以使用clearTimeout函数来实现。clearTimeout函数接受一个参数，该参数是要清除的setTimeout的返回值。
let timeoutId = setTimeout(() => {
console.log('这段代码将在3秒后执行');
}, 3000);
// 取消 setTimeout 的执行
clearTimeout(timeoutId);
示例代码运行结果
// 使用 setTimeout 延时执行一个函数
setTimeout(function() {
console.log('延时执行的函数');
}, 1000);
// 使用 setTimeout 延时执行一段代码块
setTimeout(() => {
console.log('延时执行的代码块');
}, 2000);
let timeoutId = setTimeout(() => {
console.log('这段代码将在3秒后执行');
}, 3000);
// 取消 setTimeout 的执行
clearTimeout(timeoutId);
在上述示例代码中，第一个setTimeout函数会在1秒后执行一个函数，第二个setTimeout函数会在2秒后执行一段代码块，第三个setTimeout函数会在3秒后执行一段代码，然后通过clearTimeout取消了第三个setTimeout函数的执行。
setInterval 函数
setInterval函数与setTimeout函数类似，也可以在指定的时间间隔内重复执行一段代码。它接受两个参数，第一个参数是要执行的函数或要执行的代码块，第二个参数是重复执行的时间间隔（以毫秒为单位）。
// 使用 setInterval 重复执行一个函数
let intervalId = setInterval(() => {
console.log('重复执行的函数');
}, 1000);
// 使用 setInterval 重复执行一段代码块
let count = 0;
let intervalId2 = setInterval(() => {
console.log(`第${count}次重复执行的代码块`);
count++;
if (count === 3) {
clearInterval(intervalId2);
}
}, 2000);
上面的示例中，第一个setInterval函数会每隔1秒执行一次函数，第二个setInterval函数会每隔2秒执行一次代码块，直到执行了3次后通过clearInterval取消了继续执行。
取消 setInterval
与setTimeout类似，setInterval也可以通过clearInterval函数来取消重复执行。
let intervalId = setInterval(() => {
console.log('重复执行的函数');
}, 1000);
// 取消 setInterval 的执行
clearInterval(intervalId);
区别与注意事项
setTimeout只会执行一次，而setInterval可以重复执行；- 使用
setTimeout来模拟setInterval的效果时，需要在函数内部再次调用setTimeout来实现； - 注意避免在
setTimeout或setInterval中嵌套过多的异步操作，以免导致性能问题； - 在使用
setTimeout和setInterval时，建议使用箭头函数来避免this的指向问题。
总结：setTimeout 和 setInterval 是 JavaScript 中常用的延时函数，可以让我们延时执行一段代码或在一定时间间隔内重复执行一段代码，使用时需要注意区分它们的用法和注意事项，合理使用可以为我们的前端开发提供便利。