JS延時定時器——讓JavaScript程序按你的規則執行

一、JS延時定時器方法

在JavaScript中，我們用setTimeout()方法和setInterval()方法來實現延時和定時的效果。

// setTimeout()方法，延時一次性執行
setTimeout(function(){
    console.log('延時1秒後執行');
}, 1000);

// setInterval()方法，定時執行，直到 clearInterval()結束
let i = 0;
let intervalId = setInterval(function(){
    i++;
    console.log('第' + i + '次執行');
}, 1000);
setTimeout(function(){
    clearInterval(intervalId);
}, 5000);

二、JS延時器的使用方法

setTimeout()方法和setInterval()方法的使用都需要傳遞兩個參數，第一個參數是一個函數，第二個參數是表示毫秒數的數字。

setTimeout()方法的函數只執行一次，執行後就結束了。

setInterval()方法的函數會每隔一段時間重複執行，除非你使用clearInterval()函數停止它。

三、定時器延時程序

在一些場合下，我們需要延時一段時間後再運行程序。這時候就可以使用setTimeout()方法來實現定時效果。

// 例子1：延遲3秒後彈出提示框
setTimeout(function(){
    alert('三秒後彈出提示框');
}, 3000);

// 例子2：延遲5秒後更改背景顏色
setTimeout(function(){
    document.body.style.backgroundColor = 'red';
}, 5000);

四、定時器延時器

setInterval()方法會每隔一段時間重複執行一次，除非用clearInterval()函數停止它。

// 例子1：每秒鐘列印一次當前時間
setInterval(function(){
    let now = new Date();
    console.log(now);
}, 1000);

// 例子2：每隔2秒鐘把一組數字寫入文檔
let i = 0;
setInterval(function(){
  let element = document.createElement('div');
  element.innerHTML = i++;
  document.body.appendChild(element);
}, 2000);

五、JS延時定時器加遞歸函數

遞歸函數可以讓延時定時器變得更有用。它可以讓定時器每隔一段時間就不停地執行一段代碼。

// 例子：每一秒鐘彈出一個提示
function repeat(func, interval) {
  var timerId = setInterval(function() {
    func();
  }, interval);
  return timerId;
}

var hello = 0;
function sayHello() {
  hello++;
  if (hello > 5) {
    clearInterval(timerId);
  } else {
    setTimeout(function() {
      alert("Hello!");
      sayHello();
    }, 1000);
  }
}
var timerId = repeat(sayHello, 2000);

六、JS延時定時器越來越快

在使用setInterval()方法時，它的執行時間是從
「開始時間 + 延遲時間 = 執行時間」
這樣的公式計算的。但是實際應用中，我們可能需要設置動態的延遲時間，讓程序的執行速度越來越快。

// 例子：每隔3秒鐘執行一次，延時時間越來越短，直到延時時間為0
let delay = 3000;
let timerId = setTimeout(function tick() {
  console.log('執行了一次');
  delay -= 100;
  if(delay < 0) delay = 0;
  timerId = setTimeout(tick, delay);
}, delay);

七、斷開延時定時器

在一些情況下，我們需要「斷開」一個已經運行的setTimeout()或setInterval()，以防止程序繼續執行。

// 例子：每3秒鐘執行一次，執行5次後停止
let i = 0;
let intervalId = setInterval(function(){
    i++;
    console.log('第' + i + '次執行');
    if(i >= 5) clearInterval(intervalId);
}, 3000);

八、關斷延時定時器

斷電或者關閉網頁時，尚未執行的setTimeout()或setInterval()操作可能會引起不必要的麻煩。為了避免這些問題，我們需要關閉這些定時器。

// 例子：延時10秒後停止
let i = 0;
let timeoutId = setTimeout(function(){
    console.log('延時執行了一次');
}, 10000);
window.addEventListener('beforeunload', function(){
    clearTimeout(timeoutId);
});

九、PLC斷電延時定時器

在PLC（Programmable Logic Controller，可編程邏輯控制器）中，斷電延時定時器是一種常用的計時方式，它可以在PLC斷電後延時若干秒再次啟動。
但在JS中，JS程序與硬體不同，需要判斷當前時間和啟動時間的差值，來判斷是否需要執行延時操作。

function plcDelay(ms){
    let now = new Date().getTime();
    while(new Date().getTime() < now + ms){
    }
}
// 例子：延時1秒，然後輸出「延時1秒後執行」
console.log('開始執行');
plcDelay(1000);
console.log('延時1秒後執行');