如何在 JavaScript 中停止「setTimeout」或「setInterval」循環？-css教學-PHP中文網

如何在 JavaScript 中停止「setTimeout」或「setInterval」循環？

Linda Hamilton

發布： 2024-12-01 16:23:09

原創

354 人瀏覽過

How Can I Stop a `setTimeout` or `setInterval` Loop in JavaScript?

停止 setTimeout 循環

使用精靈建立載入指示器時，常見的方法是使用一個函數來設定指標。為了建立連續循環，程式碼在 setTimeout 回調中遞歸呼叫該函數。但是，可能會出現這樣的情況：您需要在完成某個操作後停止此循環。

一種解決方案是檢索 setTimeout 傳回的計時器句柄，並將其與clearTimeout 一起使用來終止循環。以下是實作此方法的程式碼的修改版本：

function setBgPosition() {
  var c = 0, timer = 0;
  var numbers = [0, -120, -240, -360, -480, -600, -720];

  function run() {
    Ext.get('common-spinner').setStyle('background-position', numbers[c++] + 'px 0px');
    if (c >= numbers.length) {
      c = 0;
    }
    timer = setTimeout(run, 200);
  }

  timer = setTimeout(run, 200);
  
  return stop;  // Function to stop the loop

  function stop() {
    if (timer) {
      clearTimeout(timer);
      timer = 0;
    }
  }
}

登入後複製

要使用此程式碼，您可以呼叫setBgPosition() 並將傳回的函數（停止）儲存在變數中：

var stop = setBgPosition();

登入後複製

當你需要停止循環時，只需呼叫stop 函數即可：

stop();

登入後複製

或者，你可以使用setInterval 取代 setTimeout。 setInterval 以給定的時間間隔自動重複指定的函數。這是使用 setInterval 的範例：

function setBgPosition() {
  var c = 0;
  var numbers = [0, -120, -240, -360, -480, -600, -720];

  function run() {
    Ext.get('common-spinner').setStyle('background-position', numbers[c++] + 'px 0px');
    if (c >= numbers.length) {
      c = 0;
    }
  }
  
  return setInterval(run, 200);
}

登入後複製

在這種情況下，下面的程式碼將停止循環：

var timer = setBgPosition();
clearInterval(timer);

登入後複製

以上是如何在 JavaScript 中停止「setTimeout」或「setInterval」循環？的詳細內容。更多資訊請關注PHP中文網其他相關文章！