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

Posted 2023-02-26

【中文标题】在“for”循环迭代之间添加延迟

【英文标题】：Add delay between 'for' loop iterations

【发布时间】：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

【参考方案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);