如何使用javascript每1秒增加一个数字？答案

【问题标题】：How can I increment a number after every 1 second using javascript?如何使用javascript每1秒增加一个数字？
【发布时间】：2015-09-13 00:06:23
【问题描述】：

一切正常，但我无法设置延迟。另外，我想在特定间隔后停止增量。请帮帮我

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>

【问题讨论】：

谷歌：setTimeout setInterval
我已经用过了，但是没用。 @Amit setTimeout(1000);
Increment integer by 1; every 1 second、Exactly similar 的可能重复

标签： javascript html

【解决方案1】：

使用setInterval 添加delay。

见代码中的内联 cmets：

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

【讨论】：

增量在一秒钟后运行，我可以让它更快
@AmanjotKaur 是的，将clearInterval 的1000 更改为更低的值
@PraveenKumar 有。现已移除
@Tushar 看看我的回答 edit，对你来说可能听起来很新：P

【解决方案2】：

这是JSFiddle

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

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

您可以改用 window.setInterval。 innerText 也变成了可编辑属性，所以你也可以试试这个：

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>

编辑：使用循环

使用 ECMAScript ES6 中的新运算符 function * 和 yield *，您可以使用循环完成您正在做的事情。注意：如果你正在学习 Javascript，你必须阅读更多关于它的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>

注意，如果您的浏览器仍然使用ES5，这将返回语法错误。现代浏览器已经有ES6，你可以在这个link之后启用它。

【讨论】：

是的，我也使用了你的方法。我可以知道什么是 1e3
@AmanjotKaur 1e3 相当于 1000，1e6 相当于 1000000 :)。 Link

【解决方案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
  })();

   &lt;div id="counter"&gt;0&lt;/div&gt;

【讨论】：