title: Issues with setInterval
body: <p>I'm creating a simple slideshow using jQuery and some javascript, but I'm running into issues using the setInterval functions.</p>
  
  <p><a href="http://jsfiddle.net/6hmwbqja/" rel="nofollow"><strong><em>JSFiddle of the Project</em></strong></a></p>
  
  <pre><code>$(document).ready(function () {
  
  slidePos = 1;
  autoScrollInterval = setInterval(function () {
      slidePos = SlideRight(slidePos)
  }, 7000);
  $(".ss-indicator-arrow").css("width", $(".ss-slideshow").width() / $(".ss-slide").length);
  
  $(".ss-right-arrow").click(function () {
      window.clearInterval(autoScrollInterval);
      slidePos = SlideRight(slidePos);
      setTimeout(function () {
          autoScrollInterval = setInterval(function () {
              slidePos = SlideRight(slidePos)
          }, 7000);
      }, 10000);
  });
  
  $(".ss-left-arrow").click(function () {
      window.clearInterval($.autoScrollInterval);
      slidePos = SlideLeft(slidePos);
      setTimeout(function () {
          autoScrollInterval = setInterval(function () {
              slidePos = SlideRight(slidePos)
          }, 7000);
      }, 10000);
  })
  });
  
  $(window).resize(function () {
      $(".ss-indicator-arrow").css("width", $(".ss-slideshow").width() / $(".ss-slide").length);
      Reset();
  });
  
  function SlideRight(slidePos) {
      slidePos++;
      if (slidePos &lt;= $(".ss-slide").length) {
          $(".ss-container").css("margin-left", -((slidePos - 1) * $(".ss-slideshow").width()) + "px");
          $(".ss-indicator-arrow").css("left", ($(".ss-indicator-arrow").width() * (slidePos - 1) + "px"));
      }
      else
          Reset();
  
      return slidePos
  }
  
  function SlideLeft(slidePos) {
      slidePos--;
      if (slidePos &gt; 0) {
          $(".ss-container").css("margin-left", -((slidePos - 1) * $(".ss-slideshow").width()) + "px");
          $(".ss-indicator-arrow").css("left", ($(".ss-indicator-arrow").width() * (slidePos - 1) + "px"));
      }
      else {
          slidePos = $(".ss-slide").length;
          $(".ss-container").css("margin-left", -((slidePos - 1) * $(".ss-slideshow").width()) + "px");
          $(".ss-indicator-arrow").css("left", ($(".ss-indicator-arrow").width() * (slidePos - 1) + "px"));
      }
  
      return slidePos;
  }
  
  function Reset() {
      slidePos = 1;
      $(".ss-container").css("margin-left", "0px");
      $(".ss-indicator-arrow").css("left", "0px");
  }
  </code></pre>
  
  <p>So far I've tried many different methods, and have somewhat ruined the basic functionality I had before. But for now, the primary issue is that if an arrow is pressed multiple times, after the wait setTimeout period, it will then progress through the same number of slides (ie if the button is pressed 3 times, when the setInterval starts over it will move 3 slides again)</p>
  
  <p><strong>What is the most effective way I can have an interval that pauses after user input, then resumes again?</strong></p>