JS暂停1秒

JS暂停1秒

在编写JS代码时，有时候我们需要让程序暂停一段时间再继续执行下面的代码。这种需求在很多情况下都会用到，比如在制作动画效果时，或者需要延迟执行某个操作时。在JS中，我们可以通过使用setTimeout()函数来实现暂停一段时间的效果。

使用setTimeout()函数

setTimeout()函数是JS中用来延迟执行一段代码块的函数，它接收两个参数：一个是要执行的代码块的函数，另一个是延迟的时间（以毫秒为单位）。下面我们来看一个简单的示例：

console.log("开始");
setTimeout(function(){
    console.log("1秒后输出的内容");
}, 1000);
console.log("结束");

上面的代码中，我们先输出”开始”，然后使用setTimeout()函数延迟1秒后输出”1秒后输出的内容”，最后输出”结束”。运行上面的代码，我们会看到如下的输出:

开始
结束
1秒后输出的内容

从上面的输出可以看出，setTimeout()函数并不会阻塞后续的代码执行，它只会延迟执行指定的代码块。这是因为JS是单线程执行的，也就是说JS只能在同一时间执行一段代码，因此如果setTimeout()函数能够阻塞后续代码执行的话，会导致整个页面都被阻塞，用户体验会变得很差。

使用Promise和async/await

除了使用setTimeout()函数来实现延迟执行的效果，我们还可以使用Promise和async/await来实现类似的功能。下面是一个使用Promise的示例:

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

console.log("开始");
delay(1000).then(() => {
    console.log("1秒后输出的内容");
});
console.log("结束");

上面的代码中，我们定义了一个delay()函数，该函数返回一个Promise对象，在延迟指定毫秒后才会resolve。然后我们调用这个函数并使用.then()来处理延迟后要执行的代码。

除了Promise，我们还可以使用async/await来实现类似的效果:

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

async function demo(){
    console.log("开始");
    await delay(1000);
    console.log("1秒后输出的内容");
    console.log("结束");
}

demo();

上面的代码中，我们定义了一个async函数demo()，在这个函数中我们可以使用await关键字来暂停代码的执行，直到Promise对象被resolve。当我们调用demo()函数时，代码会按照顺序执行，但在await关键字处会暂停等待1秒后再执行后续代码。

总结

在JS中实现暂停一段时间的效果，可以使用setTimeout()函数、Promise和async/await。其中，setTimeout()函数是最常用的方法，但Promise和async/await更加符合现代JS的语法和编程风格。根据实际需求选择合适的方法来实现延迟执行的效果，可以让代码更加清晰和易于维护。