title: jquery change time interval on click and when click function is done reset back to default
body: <p>I have a custom content slider where the slide happens every after 5 seconds.The slider also have Next and Prev functionalities.</p>
  
  <p><strong>Problems:</strong></p>
  
  <ol>
  <li><p>When I click next the slide doesn't happen immediately.</p></li>
  <li><p>After clicking next/prev the slider starts to slide very fast.</p></li>
  </ol>
  
  <p><strong>What I want to do:</strong></p>
  
  <p>1.When I click next/prev I want the slider to slide immediately without waiting for the 5 seconds interval. And when the slide is done reset the time interval to default ie 5 seconds.  </p>
  
  <pre><code>&lt;div id="content-slide"&gt;
      &lt;div id="content-slide-container"&gt;
          &lt;div class="content content-1"&gt;&lt;h2&gt;1&lt;/h2&gt;&lt;/div&gt;
          &lt;div class="content content-2"&gt;&lt;h2&gt;2&lt;/h2&gt;&lt;/div&gt;
          &lt;div class="content content-3"&gt;&lt;h2&gt;3&lt;/h2&gt;&lt;/div&gt;
          &lt;div class="content content-4"&gt;&lt;h2&gt;4&lt;/h2&gt;&lt;/div&gt;
          &lt;div class="content content-5"&gt;&lt;h2&gt;5&lt;/h2&gt;&lt;/div&gt;
          &lt;div class="content content-6"&gt;&lt;h2&gt;6&lt;/h2&gt;&lt;/div&gt;
          &lt;div class="content content-7"&gt;&lt;h2&gt;7&lt;/h2&gt;&lt;/div&gt;
          &lt;div class="content content-8"&gt;&lt;h2&gt;8&lt;/h2&gt;&lt;/div&gt;
          &lt;div class="content content-9"&gt;&lt;h2&gt;9&lt;/h2&gt;&lt;/div&gt;
          &lt;div class="content content-10"&gt;&lt;h2&gt;10&lt;/h2&gt;&lt;/div&gt;
          &lt;div class="content content-11"&gt;&lt;h2&gt;11&lt;/h2&gt;&lt;/div&gt;
          &lt;div class="content content-12"&gt;&lt;h2&gt;12&lt;/h2&gt;&lt;/div&gt;
          &lt;div class="content content-13"&gt;&lt;h2&gt;13&lt;/h2&gt;&lt;/div&gt;
          &lt;div class="content content-14"&gt;&lt;h2&gt;14&lt;/h2&gt;&lt;/div&gt;
          &lt;div class="content content-15"&gt;&lt;h2&gt;15&lt;/h2&gt;&lt;/div&gt;
          &lt;div class="content content-16"&gt;&lt;h2&gt;16&lt;/h2&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div id="navigation"&gt;
      &lt;span id="prev-slide"&gt;Prev&lt;/span&gt;
      &lt;span id="next-slide"&gt;Next&lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>css</p>
  
  <pre><code>#content-slide {
      width: 200px;
      height: 100px;
      position: relative;
      overflow: hidden;
      margin: 0 auto;
  }
  #content-slide-container{
      width: 3200px;
      height: 100px;
  }
  .content {
      width: 200px;
      height: 100px;
      background-color: #FF1493;
      float: left;
  }
  .content h2{
      font-size: 25px;
      text-align: center;
  }
  #navigation{
      width: 800px;
      height: 20px;
      margin: 0 auto;
  }
  #prev-slide{
      width: 100px;
      height: 20px;
      float: left;
      background-color: #000000;
      text-align: center;
      color: #FFFFFF;
      cursor: pointer;
  }
  #next-slide{
      width: 100px;
      height: 20px;
      float: right;
      background-color: #000000;
      color: #FFFFFF;
      text-align: center;
      cursor: pointer;
  }
  </code></pre>
  
  <p>js</p>
  
  <pre><code>$(document).ready(function(){
      var foo = {
          content_width   : 200,
          box             : $("#content-slide-container"),
          interval        : 0,
          counter         : 1,
          pause           : 5000,
          bar             : false
      };
      function startSlider(){
          foo.interval = setInterval(function(){
              // Next
              if(foo.bar){
                  foo.box.animate({'marginLeft':'+='+(foo.content_width)});
                  foo.counter--;
                  if(foo.counter&lt;= 1){
                      foo.bar = false;
                  }
              // Prev
              }else{
                  foo.box.animate({'marginLeft':'-='+(foo.content_width)});
                  foo.counter++;
                  if(foo.counter&gt;=16){
                      foo.bar = true;
                  }
              }
  
          },foo.pause);
      }   
      startSlider();
      function pauseSlider(){
          clearInterval(foo.interval);
      }   
      foo.box.on('mouseenter',pauseSlider).on('mouseleave',startSlider);
  
      $('#prev-slide').click(function(){
          if(foo.counter&gt;1){
              foo.bar = true;
              startSlider();
          }
      });
      $('#next-slide').click(function(){
          if(foo.counter&lt;16){
              foo.bar = false;
              startSlider();
          }
      });
  });
  </code></pre>
  
  <p>JSFIDDLE <a href="http://jsfiddle.net/Puni/2ryvmrnu/" rel="nofollow">here</a></p>