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

• 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

4 Answers 4

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