Question

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

使用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

使用setInterval添加delay。

在代码中查看内联注释：

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

这是JSFiddle

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

Answer 3

您可以改用 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启用它。

Answer 4

尝试setInterval：

＆＃13;

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

＆＃13;

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

＆＃13;

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>

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

5 个答案:

编辑：使用循环