在“for”循环迭代之间添加延迟答案

【问题标题】：Add delay between 'for' loop iterations在“for”循环迭代之间添加延迟
【发布时间】：2015-01-14 07:19:15
【问题描述】：

我正在尝试实现基本的 60 秒计数器（带有 idcounter 的 p 元素），这是在按下按钮（counter_start()）后触发的。但我希望在此之间延迟 1 秒确保在浏览器窗口中实时更新

 <script type="text/javascript">

    function counter_start(){
        x=0
        for(i=0;i<60;i++){
        x++;
        document.getElementById("counter").innerHTML=x;

         }
     }


    </script>

P.S：实现定时器可能还有其他简单的方法。但这与定时器无关……实际上我是一名学生，并试图弄清楚它的架构和机制。编辑：请发布经过测试的代码版本，因为下面发布的一些 em' 不会实时更新

【问题讨论】：

你不能延迟 for 循环本身，你必须实现你自己的 for 循环版本。
您应该接受 Parth 的回答。您需要做的就是将alert(i) 替换为document.getElementById("counter").innerHTML=i

标签： javascript jquery html

【解决方案1】：

试试这个Example 希望对你有用

JS

 for(i = 1; i <= 3; i++)
   {
   (function(i){
       setTimeout(function(){
         alert(i);
     }, 1000 * i);
   }(i));
}

【讨论】：

这种方法证明对语言有很好的理解。不错

【解决方案2】：

Javascript 在浏览器中同步运行。

您需要使用setTimeout 或setInterval 来安排每秒调用for 循环的主体。我在下面的示例中使用setTimeout 来简化“垃圾收集”；在我们不再需要更新之后，我们将永远不会重新安排滴答声。

<script type="text/javascript">

var counter = 0;

function counter_tick() {
    if(counter < 60) {
        counter++;
        document.getElementById("counter").innerHTML = counter;
        setTimeout(counter_tick, 1000); // Schedule next tick.
    }
}

function counter_start() {
    counter_tick(); // First update, also schedules next tick to happen.
}


</script>

【讨论】：

【解决方案3】：

听起来您正在寻找一种暂停当前线程的方法，isn't possible in JavaScript 无论如何都可能是个坏主意（线程暂停时用户的浏览器会锁定）。

timer 确实是解决这个问题的方法，否则你就是在与语言的预期工作方式作斗争。

【讨论】：

【解决方案4】：

JS 中没有sleep-function。但是您可以使用window.setTimeout 在给定的时间间隔内调用函数：

function counter_start(){
    // get current value
    var value = document.getElementById("counter").innerHTML*1;
    // leave function if 60 is reached
    if(value == 60) {
         return;
    }
    // set the innerHTML to the last value + 1
    document.getElementById("counter").innerHTML=value+1;
    // call next iteration
    window.setTimeout(function(){counter_start()}, 100);
}

counter_start();

JSFiddle-Demo

【讨论】：

为什么你自己的函数中有 counter_start() ？应该只是 window.setTimeout(counter_start, 100);

【解决方案5】：

for 循环会一直运行到完成，因此您通常不会为此使用一个。你只需要一个计时器和一个变量来增加：

var maketimer = function(){
    var tick = 0,
        interval_ms = 1000,
        limit = 10,
        id;
    return {
        start: function(){
            var timer = this;
            console.log('start');
            id = setInterval(function(){
                if(tick === limit){
                    timer.stop();
                    timer.reset();
                    return;
                }
                tick += 1;
                console.log(tick);
            }, interval_ms);
        },
        stop: function(){
            console.log('stop');
            clearInterval(id);
        },
        reset: function(){
            console.log('reset');
            tick = 0;
        }
    };
};

var t = maketimer();
t.start();

如果你真的需要使用 for 循环，那么你可以使用 generator function。它们是提议的 ES6 规范的一部分，您需要 Firefox 26+ 来试用它。然而，这样做的唯一目的是了解生成器函数。

var maketimer = function(){
    var interval_ms = 1000,
        limit = 10,
        id,
        loop,
        it;
    loop = function*(){
        var i;
        for(i=1; i<=limit; i+=1){
            yield i;
        }
    };
    it = loop();
    return {
        start: function(){
            var timer = this;
            console.log('start');
            id = setInterval(function(){
                var tick = it.next();
                console.log(tick.value);
                if(tick.done){
                    timer.stop();
                    timer.reset();
                    return;
                }
            }, interval_ms);
        },
        stop: function(){
            console.log('stop');
            clearInterval(id);
        },
        reset: function(){
            console.log('reset');
            it = loop();
        }
    };
};

var t = maketimer();
t.start();

【讨论】：

【解决方案6】：

试试这个::

var x=0;
var myVar;
function myTimer() {
    x++;        
    document.getElementById("counter").innerHTML = x;
    if(x==60)
        clearInterval(myVar);
}
function counter_start(){
    myVar=setInterval(function(){myTimer()},1000);
 }

【讨论】：