Question

我正在使用Odometer来显示动画计数器：

  setTimeout(function (){
  $('.odometer').html(8567);
}, 1000);
</script>
<script>
window.odometerOptions = {
  duration: 3000
};

我希望计数器重新开始于我在html中定义的值（即1000），然后再返回到8567并无限期地重复。我尝试过：

$(document).ready(function () {
function loop(){
    setTimeout(function (){
    $('.odometer').html(8567);},1000,loop);

loop();
});

但是它打破了计数器。我假设在定义循环时无法混合setTimeout，但不知道还要尝试什么。 setTimeout函数中的1000只是一个巧合，是页面加载后启动该函数的延迟。

Answer 1

如果您希望像这样在一段时间内反复调用函数，则应使用setInterval而不是setTimeout。

您需要跟踪循环的当前值，您现在正在每次将计数器设置为8567。

const start = 1000;
const max = 1010;
var c = start;
var el = document.getElementById('counter');

function counter() {
  if (c > max) {
    c = start;
  }
  
  el.innerHTML = c + "";
  c++;

}

counter(); // Optional, can exclude if you want to delay starting the timer

setInterval(counter , 1000)

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

如何循环此功能？

1 个答案: