JavaScript中有效的定時器——settimeout和clearTimeout技巧

JavaScript定時器是一種可以在指定的時間間隔後重複執行代碼或一次性執行代碼的機制。setTimeout()和clearTimeout()是JavaScript中最基本的兩個定時器方法，可以在我們編寫Web應用程序時起到重要的作用。這篇文章將介紹一些關於如何使用settimeout和clearTimeout的技巧，幫助你寫出更加高效的代碼。

一、使用settimeout實現延遲執行

setTimeout()方法可以在指定的時間間隔後執行回調函數，這在執行一些延遲操作時非常有用。下面是使用setTimeout()方法實現延遲調用的代碼示例：

// 延遲執行回調函數
setTimeout(function() {
  console.log('這條信息會在5000ms後列印到控制台上');
}, 5000);

上面的代碼會在5秒後在控制台上輸出一條消息。settimeout方法還可以傳入多個參數，這些參數會被傳遞給回調函數：

setTimeout(function(param1, param2) {
  console.log(param1 + param2);
}, 5000, 'Hello', 'World');

上面的代碼會在5秒後在控制台上輸出”Hello World”。

二、清除settimeout定時器

當我們想要停止某個定時器時，可以使用clearTimeout()方法。下面是一些使用clearTimeout()方法清除定時器的示例：

示例1：

var timer = setTimeout(function() {
  console.log('5秒後這條信息會被列印到控制台')
}, 5000);

clearTimeout(timer); // 可以使用變數名來清除定時器

示例2：

var timer = setTimeout(function() {
  console.log('這條信息不會被列印到控制台');
}, 5000);

clearTimeout(timer);
clearTimeout(timer); // 多次調用clearTimeout()方法不會產生副作用

三、使用settimeout和clearTimeout實現計時器

使用settimeout和clearTimeout可以實現常見的計時器功能。下面的示例是一個簡單的計時器，它可以在網頁上實時顯示已經過去的時間：

// 獲取頁面上的元素
var timeDisplay = document.querySelector('#time');
var startButton = document.querySelector('#startButton');
var stopButton = document.querySelector('#stopButton');
var resetButton = document.querySelector('#resetButton');

// 用於存儲定時器ID
var timer;

// 記錄計時器開始的時間
var startTime;

// 每一幀調用的回調函數
function run() { 
  // 計算已經過去的時間
  var elapsedTime = Date.now() - startTime;

  // 將時間轉換為字元串
  var minutes = ('0' + Math.floor(elapsedTime / 60000)).slice(-2);
  var seconds = ('0' + Math.floor((elapsedTime % 60000) / 1000)).slice(-2);
  var milliseconds = ('00' + (elapsedTime % 1000)).slice(-3);

  // 將時間顯示在頁面上
  timeDisplay.innerHTML = minutes + ':' + seconds + '.' + milliseconds;

  // 下一幀回調
  timer = setTimeout(run, 10);
}

// 開始計時
startButton.addEventListener('click', function() {
  // 開始計時的時間
  startTime = Date.now();

  // 開始調用run函數
  run();

  // 禁用開始按鈕
  startButton.disabled = true;
});

// 停止計時
stopButton.addEventListener('click', function() {
  // 停止計時器
  clearTimeout(timer);

  // 啟用開始按鈕
  startButton.disabled = false;
});

// 重置計時
resetButton.addEventListener('click', function() {
  // 停止計時器
  clearTimeout(timer);

  // 將時間顯示為 00:00.000
  timeDisplay.innerHTML = '00:00.000';

  // 啟用開始按鈕
  startButton.disabled = false;
});

四、如何優化settimeout()

setTimeout()方法雖然非常常用，但是也容易產生一些問題，例如定時器代碼的執行時間過長，回調函數被阻塞，進而影響頁面的性能。可以通過減少定時器的使用次數來提高性能，下面是一些減少settimeout()方法使用次數的技巧：

1、節流和防抖動

當一些操作需要在持續時間內執行很多次時，可以使用節流和防抖動技術。節流技術可以控制一些事件的執行速率，例如控制按鈕點擊事件的執行速率，從而減少settimeout()方法的使用。

防抖動技術可以避免一些不必要的執行，例如當用戶在輸入框中輸入文字時，可以等待他們輸入完全部文字後再對內容進行校驗，而不是每一次輸入都進行校驗，從而減少settimeout()方法的使用。

2、使用requestAnimationFrame

requestAnimationFrame()方法是瀏覽器提供的一種優化性能的方法，它可以讓瀏覽器在進行動畫或其他操作時更加流暢。相比於settimeout()方法，使用requestAnimationFrame()方法可以減少一些性能問題。

五、結語

本文介紹了通過使用settimeout和clearTimeout方法實現各種定時器功能的技巧。在編寫JavaScript程序時，了解這些方法及其使用場景可以讓你的代碼更高效，更加優秀。