JS延时执行

一、setTimeout和setInterval的区别

在JS延时执行的常用方法中，setTimeout和setInterval是最常见的。虽然它们都可以延迟一段时间后执行一段代码，但是它们之间还是存在一些区别的。

setTimeout用于在指定的时间后执行一次特定的代码，而setInterval则会每隔指定的时间就执行一次代码。也就是说，setTimeout仅会执行一次代码，而setInterval会一直执行，直到我们使用clearInterval清除它。

另外，由于setInterval在每个间隔执行的时间可能会受到JS引擎的解析能力、硬件运行情况等多种因素的影响，所以它的执行时间并不是精确的，并且它可能会在间隔之间出现不同步的情况，特别是在代码执行较为耗时的情况下更加明显。

二、使用setTimeout实现延时执行

setTimeout最常见的用法是延时执行一段代码，我们可以使用它来实现一些需要等待一段时间后才执行的操作，比如模拟一些动画效果，或者在一段时间后才弹出提示框。

下面是一个使用setTimeout实现的倒计时示例：

let countDown = (count) => {
  setTimeout(() => {
    console.log(count);
    if(count > 0){
      countDown(count - 1);
    }
  }, 1000);
}
countDown(5);

在上面的代码中，我们使用了递归的方式来实现倒计时的功能，并且每隔一秒钟打印当前的计数值，直到计数为0。

三、使用setInterval实现定时执行

与setTimeout不同的是，setInterval可以在指定的时间间隔内不断地执行一段代码，直到我们使用clearInterval停止它。

下面是一个每隔1秒钟打印一次当前时间的例子：

let timer = setInterval(() => {
  console.log(new Date().toLocaleTimeString());
}, 1000);

四、使用setTimeout实现连续执行

有时候我们需要在执行完一个异步任务后再执行另一个异步任务，这时候我们可以使用setTimeout来实现异步任务的连续执行。

下面是一个使用setTimeout实现的异步任务连续执行的示例：

let task1 = () => {
  setTimeout(() => {
    console.log('Task 1 finished');
    task2();
  }, 1000);
}

let task2 = () => {
  setTimeout(() => {
    console.log('Task 2 finished');
    task3();
  }, 2000);
}

let task3 = () => {
  setTimeout(() => {
    console.log('Task 3 finished');
  }, 3000);
}

task1();

在上面的例子中，我们通过多次嵌套使用setTimeout来实现了异步任务的连续执行，每个异步任务执行完成后再执行下一个异步任务，直到所有的异步任务都执行完成。

五、使用Promise来实现延时执行

ES6中引入的Promise可以让我们更加灵活地控制异步任务的执行，包括延时执行。

下面是一个使用Promise封装延时执行的示例：

let sleep = (ms) => {
  return new Promise(resolve => setTimeout(resolve, ms));
}

let start = async () => {
  console.log('Start');
  await sleep(1000);
  console.log('After 1s');
  await sleep(2000);
  console.log('After 2s');
  await sleep(3000);
  console.log('After 3s');
}

start();

在上面的代码中，我们定义了一个sleep函数，它返回一个Promise，在指定的时间后resolve这个Promise。使用async/await关键字，我们可以很方便地实现异步任务的延时执行。

六、setTimeout和setInterval在React中的应用

React是一种基于组件化的开发模式，而组件的渲染和更新通常与JS的延时执行相关。

下面是一个使用setInterval实现组件渲染的实例：

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }

  componentDidMount() {
    this.timerID = setInterval(
      () => this.tick(),
      1000
    );
  }

  componentWillUnmount() {
    clearInterval(this.timerID);
  }

  tick() {
    this.setState({
      date: new Date()
    });
  }

  render() {
    return (
      <div>
        <h1>{this.state.date.toLocaleTimeString()}</h1>
      </div>
    );
  }
}

ReactDOM.render(
  <Clock />,
  document.getElementById('root')
);

在上面的代码中，通过在组件的生命周期方法中使用setInterval实现了一个每秒钟更新一次的时钟组件。

七、小结

JS延时执行在前端开发中扮演着重要的角色，它可以帮助我们实现许多有意思的特效和功能。在常见的JS延时执行方法中，setTimeout和setInterval是最为常见的两种。通过使用它们，我们可以实现不同形式的延时执行，包括倒计时、异步任务连续执行、组件定时渲染等。另外，ES6中引入的Promise也为我们实现延时执行带来了更加灵活的方式。

原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/188317.html