Добавить задержку между итерациями цикла 'for'

Question

Я пытаюсь реализовать базовый счетчик 60 секунд (A p с идентификатором 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> 

PS: Там могут быть и другие простые способы реализации timer.But это не про таймер ... на самом деле я студент и пытается выяснить структуру и механизм этого. EDIT: пожалуйста, напишите протестированные версии кода, так как некоторые из их»размещены ниже НЕ обновлять в реальном времени

Answer 1

Попробуйте Example Надеюсь, что это будет работать для и

JS

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

Answer 2

Похоже, вы ищете способ приостановить текущий поток, который isn't possible in JavaScript и, вероятно, будет плохой идеей в любом случае (браузер пользователя закроется, пока поток приостановлен).

A timer - это действительно способ пойти с этим, иначе вы боретесь с тем, как язык предназначен для работы.

Answer 3

Javascript работает синхронно в браузере.

Вам необходимо использовать setTimeout или setInterval, чтобы запланировать, чтобы тело цикла цикла вызывалось каждую секунду. Я использую 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> 

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

Для петель запуска до завершения, так что вы не обычно использовать один для этого. Вам просто нужен таймер и переменный для увеличения:

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

Если вам действительно нужно использовать для цикла, то вы могли бы использовать 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); 
}