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 et-al

我通过<body onload = log10();>

调用函数

有谁知道发生了什么事。我更有兴趣知道如何根据我的代码$("span").text(i)

在span中记录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结合显示的数字：

Working jsFidle example

// 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 个答案:

Working jsFidle example