javascript - jQuery setInterval 问题

Question

我正在运行一个每秒检查远程脚本并更新进度条的函数。我是 setInterval 的新手，并且在让它完成后停止循环时遇到问题。

我在几个不同的地方添加了 var Interval post 函数和 clearInterval(interval); - 基本上就像遮住我的眼睛并将尾部固定在驴子上 -但没有成功。我应该在哪里设置 clearInterval 以在 data 达到 100 时停止循环？

function getProgress(hash) {
  setInterval(function() {
    $.ajax({
        type: 'GET',
        url: 'http://domain.com/script.php?hash=' + hash,
        cache: false,
        dataType: 'json',
        success: function(data) {
          if (data < 100) {
            getProgress();
          } else {
            $('#progress-bar').hide();
          }
        },
    });
  }, 1000);
}

Answer 1

这是假设您无法停止之前的间隔的答案。您正在调用getProgress每次data < 100时的方法。这会调用另一个 setInterval方法，并重新创建一个新的 id对于该间隔。

假设 getProgress方法在循环中调用多次，如果这样做的话，

var intervalId;
function getProgress(hash) {
  intervalId = setInterval(function() {..}, 1000);
}

下次你想停止间隔时，你可以调用 clearInterval(intervalId) 。这是非常错误的。您有多个一个间隔，而您恰好停止了最后一个间隔，而之前的间隔仍在运行，直到 data < 100是假。

我建议将您的间隔 ID 存储在数组中，例如..

var intervalIds = [];
function getProgress(hash) {
  intervalId = setInterval(function() {..}, 1000);
  intervalIds.push(intervalId);
}

如果下次你想停止间隔，你可以这样做......

for (var idx in intervalIds) {
   clearInterval(intervalIds[idx]);
}

但是，这只是停止所有间隔的一种方法。我想说的是你的代码很丑。如果您使用setInterval的原因方法是等待1000 ms要检索另一个数据，setTimeout会很好地完成这项工作。这是使用它并将参数传回的示例。

function getProgress(hash){
   $.ajax({
        type: 'GET',
        url: 'http://domain.com/script.php?hash=' + hash,
        cache: false,
        dataType: 'json',
        success: function(data) {
          if (data < 100) {
            setTimeout(function() {
              getProgress(hash);
            }, 1000);
          } else {
            $('#progress-bar').hide();
          }
        },
    });
}