极客笔记javascript 等待几秒
在编写前端页面时，有时我们需要实现等待一定时间后再执行某些操作的功能。比如在用户点击按钮后，需要等待几秒钟后才能执行下一步操作，或者在页面加载完成后，延迟几秒再弹出提示框等等。在javascript中，实现等待几秒的功能有很多种方法，本文将为大家介绍一些常用的方法，并且附上示例代码和运行结果。
使用setTimeout函数
最常用的方法就是使用setTimeout函数来实现等待几秒的功能。setTimeout函数是javascript中的一个定时器函数，用来在指定的时间间隔之后执行一段代码。我们可以利用setTimeout函数来实现等待功能，具体做法是将需要延迟执行的代码放在一个函数中，然后将这个函数作为参数传递给setTimeout函数。
// 等待3秒后执行操作
setTimeout(function(){
console.log("等待3秒后执行的操作");
}, 3000);
上面的代码中，通过setTimeout函数等待了3秒后才打印了”等待3秒后执行的操作”。在setTimeout函数的第二个参数中，我们传入了延迟的时间，单位是毫秒。
运行结果：
等待3秒后执行的操作
使用Promise对象和async/await
除了setTimeout函数外，还可以使用Promise对象和async/await语法来实现等待功能。Promise对象是ES6引入的一种异步编程的解决方案，可以更好地处理回调地狱的问题。结合async/await语法，我们可以编写更加优雅的等待代码。
// 使用Promise对象和async/await实现等待3秒的功能
function wait(seconds){
return new Promise(resolve => {
setTimeout(() => {
resolve();
}, seconds * 1000);
});
}
async function doSomething(){
console.log("开始执行操作");
await wait(3);
console.log("等待3秒后执行的操作");
}
doSomething();
上面的代码中，我们定义了一个wait函数，它返回一个Promise对象，里面包含了等待指定时间后执行resolve的逻辑。然后我们定义了一个异步函数doSomething，在其中使用await关键字等待wait函数的返回结果，实现了等待3秒后执行操作的功能。
运行结果：
开始执行操作
// 等待3秒后
等待3秒后执行的操作
使用async/await和setTimeout
除了Promise对象外，我们还可以直接在async函数中使用setTimeout函数来实现等待功能。结合async/await语法，可以编写出更加直观的等待代码。
// 使用async/await和setTimeout实现等待3秒的功能
async function doSomething(){
console.log("开始执行操作");
await new Promise(resolve => setTimeout(resolve, 3000));
console.log("等待3秒后执行的操作");
}
doSomething();
上面的代码中，我们直接在async函数中使用了setTimeout函数来实现等待功能，等待3秒后执行下一步操作。
运行结果：
开始执行操作
// 等待3秒后
等待3秒后执行的操作
使用ES7的async/await简化写法
在使用async/await时，可以使用ES7的语法糖async来简化代码的书写。通过在函数前加上async关键字，我们可以更加方便地实现等待功能。比如将上面的示例用ES7的写法改写如下：
// 使用ES7的async/await简化写法实现等待3秒的功能
async function doSomething(){
console.log("开始执行操作");
await new Promise(resolve => setTimeout(resolve, 3000));
console.log("等待3秒后执行的操作");
}
doSomething();
上述代码的运行结果与之前的运行结果是相同的。
通过上面的介绍，我们可以看到在javascript中实现等待几秒的功能并不困难，可以根据自己的习惯和项目需求选择合适的方法来实现。