JS 延时执行|极客笔记

JS 延时执行

在前端开发中，有时候我们需要延时执行一些代码，比如在页面加载完成之后再执行某个函数，或者在用户停止输入一段时间后再发送请求。这时候我们就可以使用 JavaScript 的延时执行功能来实现。

使用 setTimeout 实现简单延时执行

setTimeout 是 JavaScript 提供的一个函数，用于在指定的时间后执行一段代码。它接收两个参数，第一个参数是要执行的函数，第二个参数是延时的时间（单位为毫秒）。

下面是一个简单的示例：

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

setTimeout(sayHello, 2000); // 2秒后输出 'Hello, world!'

在这个示例中，我们定义了一个函数 sayHello，然后调用 setTimeout 函数，让它在 2 秒钟之后执行 sayHello 函数。当时间到达时，控制台会输出 Hello, world!。

使用 setTimeout 实现循环延时执行

有时候我们可能需要循环执行某个函数，但是希望在每次执行之间有一定的间隔。这时候我们可以使用递归调用 setTimeout 来实现：

let count = 0;

function printCount() {
    console.log(count);
    count++;

    if (count < 5) {
        setTimeout(printCount, 1000); // 每隔1秒输出一个数字
    }
}

printCount(); // 每隔1秒输出 0, 1, 2, 3, 4

在这个示例中，我们定义了一个全局变量 count，然后定义了一个函数 printCount，在函数内部打印 count 的值并将 count 递增。然后通过判断 count 的值是否小于 5，如果小于就再次调用 setTimeout 来实现循环延时执行。

使用 Promise 和 setTimeout 结合实现延时执行

有时候我们希望在延时执行完毕后执行一些异步操作，并在操作完成后做一些处理。这时候可以使用 Promise 和 setTimeout 结合来实现：

function delay(ms) {
    return new Promise(resolve => setTimeout(resolve, ms));
}

delay(2000)
    .then(() => {
        console.log('2秒之后执行异步操作');
        return fetch('https://api.example.com/data');
    })
    .then(response => response.json())
    .then(data => console.log(data));

在这个示例中，我们先定义了一个 delay 函数，接收一个延时时间，并返回一个 Promise 对象。在 then 方法中我们可以继续链式调用，在延时结束后执行异步操作，并在操作完成后打印返回的数据。

使用 async/await 和 setTimeout 结合实现延时执行

如果我们更倾向于使用 async/await 来处理异步操作，也可以和 setTimeout 结合来实现延时执行：

function delay(ms) {
    return new Promise(resolve => setTimeout(resolve, ms));
}

async function fetchData() {
    await delay(2000);
    console.log('2秒之后执行异步操作');
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    console.log(data);
}

fetchData();

在这个示例中，我们定义了一个 delay 函数，接收延时时间并返回一个 Promise 对象。然后在 fetchData 函数中使用 await 来等待延时执行结束，再执行后续的异步操作。