JavaScript で `setTimeout` または `setInterval` ループを停止するにはどうすればよいですか?-CSSチュートリアル-php.cn

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 コールバック内で関数を再帰的に呼び出します。ただし、特定のアクションの完了時にこのループを停止する必要がある場合があります。

解決策の 1 つは、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() を呼び出し、返された関数 (stop) を変数に格納します:

var stop = setBgPosition();

ログイン後にコピー

ループを停止する必要がある場合は、単純に stop 関数を呼び出します。

stop();

ログイン後にコピー

または、 setTimeout の代わりに setInterval を利用できます。 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 中国語 Web サイトの他の関連記事を参照してください。