How can I increment a number after every 1 second using javascript?

Question

Everything is working but im unable to set the delay. Also , I will like to stop the increment after a particular interval. kindly please help me

Javascript:

$(document).ready(function() {
    var number = parseInt($('#test').text().trim());
    while (number != 1000) {
        number++;
        $("#test").text(number);
        var number = parseInt($('#test').text().trim());
    }
});

HTML:

<p id="test">1</p>

Answer 1

Use setInterval to add delay .

See comments inline in the code:

$(document).ready(function() {
    var number = parseInt($('#test').text(), 10) || 0; // Get the number from paragraph


    // Called the function in each second
    var interval = setInterval(function() {
        $('#test').text(number++); // Update the value in paragraph

        if (number > 1000) {
            clearInterval(interval); // If exceeded 100, clear interval
        }
    }, 1000); // Run for each second
}); 

DEMO

Answer 2

Here is a JSFiddle

$(document).ready(function(){
    setInterval(function () {
       var number = parseInt($('#test').text().trim());
       if (number < 1000) {
          $('#test').html(number+1);
       }
    }, 1000);
});

Answer 3

You can use window.setInterval instead. innerText also comes to be an editable property, so you can also try this:

 var loop = setInterval(function(){ ++$("#test")[0].innerText >= 1000 && clearInterval(loop) }, 10) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <p id="test">0</p> 

Edit: Using loops

With the new operators function * and yield * in ECMAScript ES6 you can do exactly what you're doing using loops. Note: If you are learning Javascript, you must read more about its functioning .

 function* incrementFn(){ var number = +$("#test").text(); while(number != 1000){ yield number++; $("#test").text(number) } } $(document).ready(function(){ var incrementLoop = incrementFn(); var interval = setInterval(function(){ if(incrementLoop.next().done) clearInterval(interval) }, 10) }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <p id="test">0</p> 

Note that this will return a syntax error if your browser still uses ES5 . Modern browsers already have ES6 , you can enable it following this link .

Answer 4

Try setInterval :

 $(function() { var test = $('#test'); // cache object setInterval(function() { test.text(1 + (+test.text())); // +('3') <-- 3, parsing string to number }, 1000);// (in miliseconds) repeat every 1 second }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <p id="test">1</p> 

Answer 5

  (function() { let counterEl = document.getElementById('counter'); let number = 0; let interval = setInterval(() => { counterEl.innerText = number++; if(number > 10) { clearInterval(interval); } }, 1000);// repeat every 1 second })(); 

  <div id="counter">0</div>