title: Use setTimeout with Recursion funtion
body: <p>I'm trying to make a slideshow. I peek at some snippets and then try to recreate them without plainly copying.
  This is the snippet:</p>
  <pre><code>var slideIndex = 0;
  showSlides();
  
  function showSlides() {
    var i;
    var slides = document.getElementsByClassName(&quot;mySlides&quot;);
    for (i = 0; i &lt; slides.length; i++) {
      slides[i].style.display = &quot;none&quot;;
    }
    slideIndex++;
    if (slideIndex &gt; slides.length) {slideIndex = 1}
    slides[slideIndex-1].style.display = &quot;block&quot;;
    setTimeout(showSlides, 2000); // Change image every 2 seconds
  } 
  </code></pre>
  <p>Well, what I do not understand how does the setTimeout works when the function was just called once, and why not to use setInterval outside the function.
  Thanks a lot.</p>