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也為我們實現延時執行帶來了更加靈活的方式。