Question

如果满足条件，如何设置一个中断的setInterval渲染循环？

Answer 1

您可以存储间隔ID并通过clearInterval()清除它，例如

var timer = setInterval(myFunction, 1000);

function myFunction() {
  if(condition) {
    clearInterval(timer);
    return;
  }
  //do stuff
}

或者如果您可以调用设置条件的clearInterval()，那么下一个间隔不会运行，在函数本身中没有逻辑。

Answer 2

clearInterval使用setInterval返回的ID停止setInterval的重复：

var interval = setInterval(function() {
    // do your loop
    if (loop_should_stop) {
        clearInterval(interval);
    }
}, dt);

Answer 3

如果您询问如何停止使用setInterval（）设置的函数调用，只需使用clearInteval() function。首先必须保存对setInterval函数的引用，然后使用此引用来停止间隔：

var int=self.setInterval("your_function_name()",1000);
if(condition){
    clearInterval(int)
}

Answer 4

尼克的回答完美无缺。我通过返回一个承诺来扩展它

function checkUntil(conditionFunc, millisecondsInterval) {
    var retryCount = 0;
    var retryCountLimit = 100;

    var promise = new Promise((resolve, reject) => {
        var timer = setInterval(function () {
            if (conditionFunc()) {
                clearInterval(timer);
                resolve();
                return;
            }
            retryCount++;
            if (retryCount >= retryCountLimit) {
                clearInterval(timer);
                reject("retry count exceeded");
            }
        }, millisecondsInterval);
    });

    return promise;
}

你可以像这样调用它

checkUntil(function () {
        return document.querySelector('body');
    }, 500).then(function () {
          ...
          ...
        });

    });

js渲染循环，一旦满足条件就会中断

4 个答案: