从多个方面JS延迟1秒

一、setTimeout函数的基本使用

setTimeout是JS中很常用的延迟1秒的函数。其基本语法为：

setTimeout(function(){
  //执行代码
}, 1000);

其中，第一个参数为回调函数，第二个参数为延迟时间，单位是毫秒。以上示例中，需等待1秒后才会执行回调函数中的代码。

需要注意的是，延迟时间并不是确定的时间，而是一个范围。因为JS是单线程的语言，setTimeout函数会把回调函数放入异步队列中，等待主线程完成当前任务后才会执行。若当前任务执行时间过长，异步队列中的回调函数就会延迟执行。

二、多次setTimeout的调用

当需要延迟执行一系列代码时，可以使用多次setTimeout函数。示例代码如下：

setTimeout(function(){
  //执行代码1
  setTimeout(function(){
    //执行代码2
    setTimeout(function(){
      //执行代码3
    }, 1000);
  }, 1000);
}, 1000);

以上示例中，需要等待1秒后执行代码1，再等待1秒后执行代码2，最后再等待1秒后执行代码3。

使用多次setTimeout的好处是可以让代码更加具有可读性，容易理解。但缺点是代码嵌套深度较大，可读性较差，难以维护。

三、Promise与async/await的使用

Promise是ES6中新增的一种异步编程解决方案。其可以简化异步代码的编写，使其更加易读。示例代码如下：

function delay(){
  return new Promise(function(resolve, reject){
    setTimeout(function(){
      resolve();
    }, 1000);
  });
}

async function doSomething(){
  await delay(); //等待1秒后执行下面代码
  //执行代码
}

doSomething();

以上示例中，使用Promise封装延迟函数，并通过async/await语法糖使代码更加简洁易读。

四、jQuery的.delay()方法

jQuery是JS中广泛使用的库之一，其提供了丰富的工具函数，其中就包括延迟执行函数的方法——.delay()。示例代码如下：

$("#element").fadeIn().delay(1000).fadeOut();

以上示例中，使用.delay(1000)实现了1秒的延迟。

需要注意的是，.delay()方法只适用于jQuery的动画效果，无法使用在一般的JS代码中。

五、总结

以上就是JS延迟1秒的几种常见方法，包括setTimeout函数的基本使用、多次setTimeout的调用、Promise与async/await的使用，以及jQuery库提供的.delay()方法。需要根据具体情况选择合适的延迟函数，并理解其中的异步原理和执行顺序。

鹏仔微信 15129739599 鹏仔QQ344225443 鹏仔前端 pjxi.com 共享博客 sharedbk.com