цикл рендеринга js, который прерывается при выполнении условия

Question

Как настроить цикл рендеринга setInterval, который прерывается при выполнении условия?

Answer 1

Вы можете сохранить идентификатор интервала и очистить его с помощью clearInterval(), например,

var timer = setInterval(myFunction, 1000);

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

Или, если вы можете просто позвонить clearInterval(), где устанавливается условие, так чтоследующий интервал не выполняется, не имея логики для этого в самой функции.

Answer 2

clearInterval останавливает повторение с setInterval, используя идентификатор, возвращаемый setInterval:

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

Answer 3

Ответ Ника работает отлично.Я продлил его, вернув обещание

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 () {
          ...
          ...
        });

    });

Answer 4

Если вы спросите, как остановить вызов функции, который был установлен с помощью setInterval (), просто используйте функцию clearInteval () . Сначала вы должны сохранить ссылку на функцию setInterval, а затем использовать эту ссылку, чтобы остановить интервал:

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