setInterval (javaScript)：是否有已知的错误？

Question

100 次中有 99 次这是完美的：

function a(){
   setInterval("b()",1000); 
   updateText("still working");
}
function b(){
   timer++;
   updateText(timer);
}

有时第一个循环会等待 20 秒到 2 分钟。此后就完美运行了。我知道计时器可以在 Android 手机上暂停（当显示软键盘时）。是否还有其他条件可能会延迟 setInterval？

Answer 1

首先，强烈建议您提供回调（function）作为第一个参数而不是字符串，因为该字符串是在全局范围内计算的，我们都知道当我们使用 < 时会发生不好的事情。 js 中的 code>eval （相关 eval 帖子：什么时候是 JavaScript 的 eval()不是邪恶？)。
因此，您

setInterval("b()", 1000); 

应该重写为：

setInterval(b, 1000); 

或：

setInterval(function() { b(); }, 1000); 

我还建议您使用setTimeout来模拟setInterval。

setInterval 函数的主要缺点是它每 n 毫秒执行一个代码块，而不管前一个代码块的执行情况。
因此，如果由于某种原因 setInterval 回调的执行时间比提供的延迟时间长，则会导致一些堆栈溢出。

让我们以下面的代码为例：

function foo() {
    // this takes about 2 seconds to execute
    // .. code here
}
setInterval(foo, 1000);

这实际上会冻结浏览器，因为它将执行 foo（几乎）无限次，但永远不会完成。

这种情况的解决方案是用 setTimeout 模拟 setInterval，以确保回调在再次调用之前已完成执行：

function foo() {
    // this takes about 2 seconds to execute
    // .. code here
}
function newSetInterval(callback, duration, callbackArguments) {
    callback.apply(this, callbackArguments);
    var args = arguments,
        scope = this;

    setTimeout(function() {
        newSetInterval.apply(scope, args);
    }, duration);
}
newSetInterval(foo, 1000);

现在，foo 仅在前一个实例完成代码执行后才会再次调用。

我会将同样的事情应用于您的代码，以便让浏览器决定何时可以执行代码，而不是强迫它执行代码块（无论当时是否繁忙）：

function a() {
   newSetInterval(b, 1000); 
   updateText("still working");
}
function b() {
   timer++;
   updateText(timer);
}
function newSetInterval(callback, duration, callbackArguments) {
    callback.apply(this, callbackArguments);
    var args = arguments,
        scope=this;

    setTimeout(function() {
        newSetInterval.apply(scope, args);
    }, duration);
}

如果您感兴趣，我重写了 setInterval 和 clearInterval 函数，以便在任何地方使用它们，而无需处理堆栈溢出：

function setInterval(f, time) {
    setInterval.ids = setInterval.ids || {};
    setInterval.idCount = setInterval.idCount || 0;
    var that = this,
        id = setInterval.idCount++,
        // to prevent firefox bug that adds an extra element to the arguments
        l = arguments.length - 2;

    (function theFn() {
        // to prevent firefox bug that adds an extra element to the arguments
        var args = [].slice.call(arguments, 0, l);
        f.apply(this, args);
        setInterval.ids[id] = setTimeout.apply(this, [theFn, time].concat(args));
    }).apply(that, [].slice.call(arguments, 2, arguments.length));
    return id;
}


function clearInterval(id) {
    if(!setInterval.ids || !setInterval.ids[id]) {
        return false;
    }
    clearTimeout(setInterval.ids[id]);
    return true;
} 

Answer 2

试试这个，

setInterval(b, 1000);

或者

setInterval(function(){
   timer++;
   updateText(timer);
}, 1000);