Set ticker to use setTimeout instead of setInterval

Question

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

[setTimeout() or setInterval()](http://stackoverflow.com/questions/729921/settimeout-or-setinterval) — empiric, Jun 21 '16 at 18:31
Just replace `setInterval` by `setTimeout` if this is what you really want to do. — The_Black_Smurf, Jun 21 '16 at 18:32
*"I read that setTimeout is less cpu resources intensive"*: could you include the reference? — trincot, Jun 21 '16 at 18:33

score 6 · Accepted Answer · answered Jun 21 '16 at 18:39

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 compared to your original code.

answered Jun 21 '16 at 18:39

trincot

317,000
35
244
286

Awesome thank you so much, that's all I wanted t know, because my main point is cpu resources. – A Listorne Jun 21 '16 at 19:41

score 2 · Answer 2 · answered Jun 21 '16 at 18:38

2

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.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="ticker">

</div>

answered Jun 21 '16 at 18:38

empiric

7,825
7
37
48

I tried to follow your code, but it didn't work on mine, I guess I am doing something wrong when I try to emulate your line, thank you anyway – A Listorne Jun 21 '16 at 18:52

Adizbek Ergashev · Answer 3 · 2016-06-21T18:36:17.377

1

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.com/js/js_timing.asp

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

edited Jun 21 '16 at 18:36

answered Jun 21 '16 at 18:33

Adizbek Ergashev

732
8
17

You can handle it like above. – Adizbek Ergashev Jun 21 '16 at 18:38
I thought it would be easier, I hope I can figure it out it on my code, thank you – A Listorne Jun 21 '16 at 18:50

score 0 · Answer 4 · answered Jun 21 '16 at 18:43

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

Set ticker to use setTimeout instead of setInterval

4 Answers4

Linked