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