如何在 JavaScript 中停止'setTimeout”或'setInterval”循环？-css教程-PHP中文网

如何在 JavaScript 中停止'setTimeout”或'setInterval”循环？

Linda Hamilton

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

原创

351 人浏览过

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中文网其他相关文章！