setInterval（）在Firefox和Chrome中的行为有所不同

Question

我编写了一个函数，希望它在跨度中每秒显示1到10。 在调试程序时，我想将结果记录到控制台，并看到不同的Firefox和chrome结果，Chrome也会在每次刷新页面时更改结果。

下面是我的功能：

function log10()  {
        for(var i =0;i<=10;i++)
        {
            console.log(setInterval(function() {
                $("span").text(i)
            },6000));
        }
}

FIREFOX结果日志：2到11（通过萤火虫），并且在重新加载时保持不变。

CHROME SHOWS：1到11（通过内置的调试器），每次重新加载后显示22到22/23到33/34到34等

我正在通过<body onload = log10();>调用函数

有谁知道发生了什么事。 我更想知道如何按照我的代码$("span").text(i)记录跨度1到10

Answer 1

您不是在使用上下文函数来保存上下文的情况下保存上下文。 您应该使用setTimeout而不是setInterval ，因为setInterval直到您停止它（使用clearInterval或通过卸载页面）后才会停止。 另一方面， setTimeout对于每个循环仅运行一次，延迟为6000ms。 的jsfiddle

function log10()  {
    var i = 0;
    function repeat(){
        if(i > 10 ) return;
        setTimeout(repeat, 600);
        $("span").text(i);
        i++;
    } 
    repeat();
}

Answer 2

http://jsfiddle.net/8sdu5/2/

function log10()  {
    var counter = 1;
    var evt = setInterval(function() {
        $("span").text(counter++);
        if(counter > 10)
            clearInterval(evt);
    }, 1000);
}

您不需要循环，setInterval会自行“循环”，您只需要有一个条件告诉它何时停止。

Answer 3

您遇到了变量绑定问题。 解决它们的另一种方法是将要显示的数字与递归和setTimeout结合使用：

jsFidle工作示例

// recursive function
function log10(theNumber)  {
        if (theNumber <= 10)
        {
            setTimeout(function() {
                $("span").text(theNumber);
                log10(++theNumber);
            },1000);
        }
}

// kick things off
log10(0);

setInterval（）在Firefox和Chrome中的行为有所不同

问题描述

3 个解决方案

解决方案1
3 2012-10-24 17:42:39

解决方案2
3 2012-10-24 17:51:57

解决方案3
0 2012-10-24 18:09:59

jsFidle工作示例

setInterval（）在Firefox和Chrome中的行为有所不同

问题描述

3 个解决方案

解决方案1 3 2012-10-24 17:42:39

解决方案2 3 2012-10-24 17:51:57

解决方案3 0 2012-10-24 18:09:59

jsFidle工作示例

解决方案1
3 2012-10-24 17:42:39

解决方案2
3 2012-10-24 17:51:57

解决方案3
0 2012-10-24 18:09:59