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

Question

I wrote a function and wanted it to display 1 to 10 after every second in a span. 我编写了一个函数，希望它在跨度中每秒显示1到10。 While debugging the program I wanted to log the results to a console and saw different results for firefox and chrome, Chrome also changes the results ater every page refresh. 在调试程序时，我想将结果记录到控制台，并看到不同的Firefox和chrome结果，Chrome也会在每次刷新页面时更改结果。

Below is my function: 下面是我的功能：

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

FIREFOX RESULT LOGS: 2 to 11 (via firebug) and remains same on reload. FIREFOX结果日志：2到11（通过萤火虫），并且在重新加载时保持不变。

CHROME SHOWS: 1 to 11 (via built in debugger) And after every reload it shows 22 to 22 / 23 to 33 / 34 to 34 et-al CHROME SHOWS：1到11（通过内置的调试器），每次重新加载后显示22到22/23到33/34到34等

I am calling function via <body onload = log10();> 我正在通过<body onload = log10();>调用函数

Does anyone know whats happening. 有谁知道发生了什么事。 I am more Interesting in knowing how to log 1 to 10 in span as per my code $("span").text(i) 我更想知道如何按照我的代码$("span").text(i)记录跨度1到10

Answer 1

You are not saving context, using an anonymous function for saving context. 您不是在使用上下文函数来保存上下文的情况下保存上下文。 You should use setTimeout instead of setInterval , as setInterval will not stop until you stop it (using clearInterval or by unloading the page). 您应该使用setTimeout而不是setInterval ，因为setInterval直到您停止它（使用clearInterval或通过卸载页面）后才会停止。 At the other hand setTimeout will run only once for each loop with delay of 6000ms. 另一方面， setTimeout对于每个循环仅运行一次，延迟为6000ms。 jsfiddle 的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/ http://jsfiddle.net/8sdu5/2/

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

You don't need a loop, the setInterval will "loop" on its own, you just have to have a condition to tell it when to stop. 您不需要循环，setInterval会自行“循环”，您只需要有一个条件告诉它何时停止。

Answer 3

You are running into variable binding issues. 您遇到了变量绑定问题。 A different way to solve them is to pass in the number to be shown combined with recursion and setTimeout: 解决它们的另一种方法是将要显示的数字与递归和setTimeout结合使用：

Working jsFidle example 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

Working jsFidle example 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

Working jsFidle example 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