title: setInterval executions too fast
body: <p>There is so many good post regarding this question after their own case, but i cannot find any good answer in my case.</p>
  <p><strong>I have a multiple setInterval in different files which serves on their own functions:</strong></p>
  <ol>
  <li><p>The application is a slide show directory, and i have one main <code>setInterval</code> which process the cycle of a custom slideshow in the main app.</p>
  <pre><code>mainInterval = setInterval(changeSlide, 20000); execute after 20 seconds
  
  function changeSlide(){
     // .... do changes
  }
  </code></pre>
  </li>
  <li><p>The other one serves as a idle timer when customer click on the information of a slide a modal will appear but when the there is no user interaction the modal will close. This function reside in another javascripts file.</p>
  <pre><code>$('.item').click(function(e){
      // .. show modal
  
       idleInterval = setInterval(timerIncrement, 1000); // executes every 1 secs.
  });
  
  // This will reset idleTime when user interact with mousemove
  $(this).mousemove(function (e) {
      idleTime = 0;
  });
  
  // This will reset idleTime when user interact with keypress.
  // Since there is a side panel search engine will appear 
  // when a button search is clicked.
  $(this).keypress(function (e) {
      idleTime = 0;
  });
  
  
  function timerIncrement() {
      idleTime = idleTime + 1; // increment whenever the function is called
  
      // idleTime is more than 10 secs?
      // If true (10 secs is met) close the search panel if open
      //  and close the modal.
      if (idleTime &gt; 10) {  
  
          // ... close the search panel if open
          // ... hides modal
  
          clearInterval(idleInterval);
      }
  }
  </code></pre>
  </li>
  </ol>
  <hr />
  <blockquote>
  <p>UPDATE</p>
  </blockquote>
  <p>Since there is a modal will show when <code>.item</code> is click and in order to avoid multiple setInterval.</p>
  <p>I handle the <code>clearInterval(IdleInterval)</code> when modal hides event triggered.</p>
  <pre><code>$('#item-modal').on('hide.uk.modal', function(e){
      clearInterval(idleInterval);
  });
  </code></pre>
  <hr />
  <h3>Now the biggest problem is the modal closes before actual 10 seconds is met, when i print the <code>console.log(idleTime);</code> bang! i saw the timer executes faster than normal.</h3>