Question

我试图实现基本的60秒计数器（标识为p的A counter元素），这是在按下按钮（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：可能有其他简单的方法来实现计时器。但它不是关于计时器......实际上我是一名学生，并试图弄清楚这个的架构和机制。编辑：请发布经过测试的代码版本，因为其中一些代码是＆＃39;发布在下面不要实时更新

Answer 1

试试这个Example 希望它适用于你

<强> JS

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

Answer 2

Javascript在浏览器中同步运行。

您需要使用setTimeout或setInterval来安排每秒调用for循环的正文。我在下面的例子中使用setTimeout来简化＆＃34;垃圾收集＆＃34 ;;在我们不再需要更新内容之后，我们永远不会重新安排时间表。

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

Answer 3

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

timer实际上就是这样的方式，否则你就会按照语言的方式进行战斗。

Answer 4

JS中没有sleep - 函数。但您可以使用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

Answer 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();

Answer 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);
 }

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

6 个答案: