最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Set ticker to use setTimeout instead of setInterval - Stack Overflow

programmeradmin1浏览0评论

I read that setTimeout is less cpu resources intensive than setInterval. This is my main reason to switch to setTimeout.

This is the code of my ticker which is working perfectly fine, but I can't figure it out how make it work with setTimeout instead of setInterval

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

I read that setTimeout is less cpu resources intensive than setInterval. This is my main reason to switch to setTimeout.

This is the code of my ticker which is working perfectly fine, but I can't figure it out how make it work with setTimeout instead of setInterval

function tick() {
  $('#ticker li:first').slideUp(1000, function() {
    $(this).appendTo($('#ticker')).slideDown(1000);
  });
}
setInterval(function() {
  tick()
}, 9000);
Share Improve this question edited Jun 21, 2016 at 18:33 empiric 7,8787 gold badges38 silver badges49 bronze badges asked Jun 21, 2016 at 18:29 A ListorneA Listorne 272 silver badges6 bronze badges 3
  • setTimeout() or setInterval() – empiric Commented Jun 21, 2016 at 18:31
  • Just replace setInterval by setTimeout if this is what you really want to do. – The_Black_Smurf Commented Jun 21, 2016 at 18:32
  • "I read that setTimeout is less cpu resources intensive": could you include the reference? – trincot Commented Jun 21, 2016 at 18:33
Add a ment  | 

4 Answers 4

Reset to default 6

To replace setInterval with setTimeout, change this:

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

to:

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

However, setTimeout used in this repeated way will not use less resources. On the contrary, since you have to call setTimeout repeatedly, there is a slight extra overhead pared to your original code.

When you want to use the setTimeout()-function you have to call your function recursevly (with an inital call onload or whatever):

function tick()
{
    $('#ticker').append('<span>tick</span>');
    setTimeout(tick, 1000);
}
tick();
<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="ticker">

</div>

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);

Here is a great tutorials which can help you:

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

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

You can replace setInterval to setTimeout by calling setTimeout inside your tick function, passing it recursively:

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

评论列表(0)

  1. 暂无评论