Question

我读到setTimeout比setInterval密集的cpu资源更少。这是我切换到setTimeout的主要原因。

这是我的自动收报机代码完全正常，但我无法弄清楚如何使用setTimeout代替setInterval

function tick() {
  $('#ticker li:first').slideUp(1000, function() {
    $(this).appendTo($('#ticker')).slideDown(1000);
  });
}
setInterval(function() {
  tick()
}, 9000);

Answer 1

要将setInterval替换为setTimeout，请更改此项：

setInterval(function() {
  tick()
}, 9000);

为：

setTimeout(function repeat() {
  tick();
  setTimeout(repeat, 9000);
}, 9000);

但是，以这种重复方式使用的setTimeout将不会使用更少的资源。相反，由于您必须重复调用setTimeout，因此与原始代码相比，会有一些额外的开销。

Answer 2

＆＃13;

var ticksCount = 0;

function tick() {
  $('#ticker li:first').slideUp(1000, function() {
    $(this).appendTo($('#ticker')).slideDown(1000);
  });
}

var t = setInterval(function() {
  tick()
  if (ticksCount > 10) {
    clearInterval(t);
  }

}, 1000);

＆＃13;

这是一个很棒的教程，可以帮助您：

http://www.w3schools.com/js/js_timing.asp

https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setInterval

Answer 3

如果你想使用setTimeout() - 函数，你必须调用你的函数recursevly（带有初始调用onload或其他）：

function tick()
{
    $('#ticker').append('<span>tick</span>');
    setTimeout(tick, 1000);
}
tick();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="ticker">

</div>

Answer 4

您可以通过调用setInterval函数中的setTimeout将setTimeout替换为tick，并递归传递：{/ p>

function tick() {
  $('#ticker li:first').slideUp(1000, function() {
    $(this).appendTo($('#ticker')).slideDown(1000);
  });
  setTimeout(tick, 9000);
}
tick();

将ticker设置为使用setTimeout而不是setInterval

4 个答案: