html - How can I increment a number after every 1 second using javascript? - Stack Overflow

admin管理员组

文章数量:1278819

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>

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>

• javascript
• html

Share Improve this question Follow edited Jun 26, 2015 at 8:05 Amanjot asked Jun 26, 2015 at 6:27 AmanjotAmanjot 2,04844 gold badges1919 silver badges3333 bronze badges 3

• 1 Google: setTimeout setInterval – Amit Commented Jun 26, 2015 at 6:29
• I had already used it but it didn't worked. @Amit setTimeout(1000); – Amanjot Commented Jun 26, 2015 at 6:31
• 1 possible duplicate of Increment integer by 1; every 1 second , Exactly similar – Shaunak D Commented Jun 26, 2015 at 6:41

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 5

Use setInterval to add delay.

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

You can use window.setInterval instead. innerText also es 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./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./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.

Here is a JSFiddle

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

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./ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<p id="test">1</p>

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

本文标签： htmlHow can I increment a number after every 1 second using javascriptStack Overflow