javascript等待然后执行|极客笔记

javascript等待然后执行

在前端开发中，经常会遇到需要等待一段时间后再执行某个任务的情况。这种场景通常包括等待用户输入、等待接口返回数据等。在JavaScript中，我们可以通过一些方式来实现等待一段时间后执行代码的效果，比如使用setTimeout和Promise等。

使用setTimeout

setTimeout是JavaScript提供的一种定时执行函数的方式，可以用来实现延时执行任务的功能。通过setTimeout，我们可以指定一个函数在一定时间后被执行。下面是一个使用setTimeout实现延时执行任务的示例代码：

// 定义一个延时执行函数
function delayedTask() {
    console.log('延时执行任务');
}

// 等待3秒后执行延时任务
setTimeout(delayedTask, 3000);

在上面的代码中，我们定义了一个名为delayedTask的延时执行函数，然后使用setTimeout来等待3秒后执行这个函数。当运行这段代码时，我们会在控制台看到”延时执行任务”这个输出。

除了直接传递函数给setTimeout外，我们还可以通过在匿名函数中调用延时执行函数来实现更复杂的延时任务。下面是一个等待一段时间后执行一系列任务的示例代码：

// 定义一个延时执行函数
function delayedTask() {
    console.log('延时执行任务1');
}

// 等待1秒后执行一系列任务
setTimeout(() => {
    delayedTask();
    console.log('延时执行任务2');
    console.log('延时执行任务3');
}, 1000);

在上面的代码中，我们通过匿名函数在setTimeout里面依次调用了delayedTask函数和打印了两次日志，从而实现了等待一秒后连续执行多个任务的效果。

使用Promise

除了使用setTimeout，我们还可以使用Promise来实现等待一段时间后执行任务的效果。Promise是一种用来处理异步操作的对象，可以很方便地实现等待任务完成后再执行的功能。下面是一个使用Promise实现延时执行任务的示例代码：

// 定义一个延时执行函数
function delayedTask() {
    console.log('延时执行任务');
}

// 使用Promise等待3秒后执行延时任务
new Promise((resolve, reject) => {
    setTimeout(resolve, 3000);
}).then(() => {
    delayedTask();
});

在上面的代码中，我们通过Promise包裹了一个setTimeout来实现等待3秒后执行延时任务的功能。当定时器到达时间后，resolve将被调用，从而执行delayedTask函数。

除了等待一段时间后执行任务外，Promise还可以用于处理异步操作，以及实现链式调用等。在实际开发中，Promise常常搭配async/await关键字一起使用，以实现更加清晰和易读的异步操作代码。