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

admin管理员组

文章数量:1325532

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

• javascript
• jquery

Share Improve this question Follow edited Jun 21, 2016 at 18:33 empiric 7,87877 gold badges3838 silver badges4949 bronze badges asked Jun 21, 2016 at 18:29 A ListorneA Listorne 2722 silver badges66 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

Sorted by: 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();

本文标签： javascriptSet ticker to use setTimeout instead of setIntervalStack Overflow