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

Posted 2023-02-22

【中文标题】js渲染循环，一旦满足条件就会中断

【英文标题】：js render loop that breaks once a condition is met

【发布时间】：2011-04-18 10:07:24

【问题描述】：

如何设置 setInterval 渲染循环，一旦满足条件，就会中断？

【参考方案1】：

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

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

    );

【参考方案2】：

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

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

【讨论】：

这将导致它在停止前最后一次运行，检查需要在函数的开头。

是的。根据计算中断条件的位置，这可能是您想要的。

【参考方案3】：

你可以存储区间ID并通过clearInterval()清除，例如

var timer = setInterval(myFunction, 1000);

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

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

【参考方案4】：

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

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

【讨论】：

可以，但是不要使用字符串，使用实际的函数引用。