javascript - Are recursive setTimeouts bad for performance? - Stack Overflow

admin管理员组

文章数量:1332339

I created an image slideshow following this tutorial by W3Schools: .asp?filename=tryhow_js_slideshow_auto

It uses a recursive function via setTimeout() to auto-slide the images. Is this bad for the user's browser performance? Or can I use it without worrying?

var slideIndex = 0;
showSlides();

function showSlides() {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("dot");
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
  }
  slideIndex++;
  if (slideIndex > slides.length) {
    slideIndex = 1
  }
  for (i = 0; i < dots.length; i++) {
    dots[i].className = dots[i].className.replace(" active", "");
  }
  slides[slideIndex - 1].style.display = "block";
  dots[slideIndex - 1].className += " active";
  setTimeout(showSlides, 2000); // Change image every 2 seconds
}

I created an image slideshow following this tutorial by W3Schools: https://www.w3schools./howto/tryit.asp?filename=tryhow_js_slideshow_auto

It uses a recursive function via setTimeout() to auto-slide the images. Is this bad for the user's browser performance? Or can I use it without worrying?

var slideIndex = 0;
showSlides();

function showSlides() {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("dot");
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
  }
  slideIndex++;
  if (slideIndex > slides.length) {
    slideIndex = 1
  }
  for (i = 0; i < dots.length; i++) {
    dots[i].className = dots[i].className.replace(" active", "");
  }
  slides[slideIndex - 1].style.display = "block";
  dots[slideIndex - 1].className += " active";
  setTimeout(showSlides, 2000); // Change image every 2 seconds
}

• javascript
• recursion
• settimeout

Share Improve this question Follow edited Aug 20, 2020 at 11:26 birgersp 4,9761111 gold badges5050 silver badges9696 bronze badges asked Aug 20, 2020 at 11:10 PixelcodePixelcode 42744 silver badges1616 bronze badges 1

• 3 Yes, that's acceptable, and often remended to use instead of setInterval. Though a delayed timeout call is not actually recursive. – Teemu Commented Aug 20, 2020 at 11:19

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 8

If by recursive, you mean a setTimeout that ends up calling another (or more monly itself), then nope.

In fact, that is the preferred way to go about it.

By using setTimeout it gives the browser a break in between updates to make other updates (a.k.a., it is "non-blocking").

You can alternatively use a setInterval and let that run, but the problem with that is if something goes wrong, you have to explicitly call clearInterval or else it'll just keep throwing errors.

setTimeout will only throw one error and stop (since it doesn't make it to the call to make another setTimeout). setTimeout is definitely my, and many others, preferred method.

It also won't create any sort of stack overflow (like normal recursive functions can if they recurse too long) because it isn't truly recursive in that sense.

When setTimeout is called, the JS runtime schedule the execution of the specified callback. It's not a recursion since we don't wait for the callback return value.

Try to see setTimeout simply like something that fill a schedule, basically a setter. If you call setTimeout(callback, 2000) at 8:00:00AM, the JS runtime could say to you: "Ok! I'll execute that callback at 8:00:02 AM, but I can still do other things while waiting."

Hope this was helpful.

Since the browser is supposed to do nothing at all for another 2 seconds anyway, any hypothetical overhead of recursive setTimeout() pared to setInterval() can safely be ignored. But your program might be harder to understand when you use setTimeout() to exactly emulate setInterval(). For that reason, I would rather use setInterval to do that slideshow.

That said, in certain applications on node.js, I experienced that setInterval() has a little drift, so using setTimeout() leads to a more exact timing. But in the use case of the slide show, a little drift of a few milliseconds per interval can be ignored.

本文标签： javascriptAre recursive setTimeouts bad for performanceStack Overflow