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

Question

Everything is working but i m 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>

I had already used it but it didn't worked. @Amit setTimeout(1000); — Amanjot Kaur, Jun 26 '15 at 06:31
possible duplicate of [Increment integer by 1; every 1 second](http://stackoverflow.com/questions/10586890/increment-integer-by-1-every-1-second) , [Exactly similar](http://stackoverflow.com/q/26271084/3639582) — Shaunak D, Jun 26 '15 at 06:41

score 5 · Accepted Answer · answered Jun 26 '15 at 06:30

5

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

answered Jun 26 '15 at 06:30

Tushar

85,780
21
159
179

The increment runs after a second, can i make it more faster – Amanjot Kaur Jun 26 '15 at 06:43
1

@AmanjotKaur Yes, change the `1000` of the `clearInterval` to some lower value – Tushar Jun 26 '15 at 06:43
1

@PraveenKumar There was. Removed now – Tushar Jun 26 '15 at 08:09
@Tushar look my answer *edit*, maybe sound new to you :P – Walter Chapilliquen - wZVanG Jun 26 '15 at 08:16

score 3 · Answer 2 · edited May 23 '17 at 10:28

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.

@AmanjotKaur 1e3 is equivalent to 1000, 1e6 is equivalent to 1000000 :). [Link](http://stackoverflow.com/questions/9180772/what-number-does-8e3-evaluate-to) — Walter Chapilliquen - wZVanG, Jun 26 '15 at 07:00

michelem · Answer 3 · 2015-06-26T06:43:40.340

2

Here is a JSFiddle

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

edited Jun 26 '15 at 06:43

answered Jun 26 '15 at 06:31

michelem

14,430
5
50
66

score 0 · Answer 4 · answered Jun 26 '15 at 06:39

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>

score 0 · Answer 5 · answered Jan 17 '19 at 11:49

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

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

5 Answers5

Edit: Using loops