2

我写了一个函数，希望它在一个跨度内每秒显示 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（通过 firebug）并且在重新加载时保持不变。

CHROME SHOWS: 1 to 11 (via built in debugger) 每次重新加载后显示 22 to 22 / 23 to 33 / 34 to 34 et-al

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

有谁知道发生了什么。我更感兴趣的是知道如何根据我的代码在跨度中记录 1 到 10$("span").text(i)

4

3 回答 3

3

您没有保存上下文，而是使用匿名函数来保存上下文。您应该使用setTimeout而不是setInterval，因为setInterval在您停止它之前不会停止（使用clearInterval或通过卸载页面）。另一方面setTimeout，每个循环只运行一次，延迟为 6000 毫秒。jsfiddle

function log10()  {
    var i = 0;
    function repeat(){
        if(i > 10 ) return;
        setTimeout(repeat, 600);
        $("span").text(i);
        i++;
    } 
    repeat();
}
于 2012-10-24T17:42:39.240 回答
3

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

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

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

于 2012-10-24T17:51:57.423 回答
0

您遇到了变量绑定问题。解决它们的另一种方法是传入要显示的数字以及递归和 setTimeout：

工作 jsFidle 示例

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

// kick things off
log10(0);
于 2012-10-24T18:09:59.923 回答