title: Stop JQuery function inside $(document).ready function
body: <p>I have a JQuery slider that starts automatically whenever the page loads. I also have <code>next</code> (nextSlide function) and <code>previous</code> (prevSlide function) buttons that work. What i'm trying to accomplish is this... I would like to STOP the 'autoSwitch' whenever the <code>$('#next').on('click',nextSlide);</code> or <code>$('#prev').on('click',prevSlide);</code> is activated. </p>
  
  <p>In other words, autoswitch works on page load but stops as soon as user clicks the 'next' or 'previous' button.</p>
  
  <pre><code>$(document).ready(function() {
  var autoSwitch = true;          // auto slider
  var autoswitch_speed = 4000;    // auto slider speed
  
  // Add initial active class
  $('.slide').first().addClass('active');
  
  // Hide slides
  $('.slide').hide();
  
  // Show first slide
  $('.active').show();
  
  // Next handler
  $('#next').on('click',nextSlide);
  
  // Previous handler
  $('#prev').on('click',prevSlide);
  
  // AutoSwitch handler
  if (autoSwitch == true) {
      setInterval(nextSlide,autoswitch_speed);
  }
  
  // Switch to next slide
  function nextSlide () {
      $('.active').removeClass('active').addClass('oldActive');
      if ($('.oldActive').is(':last-child')) {
          $('.slide').first().addClass('active');
      } else {
          $('.oldActive').next().addClass('active');
      }
      $('.oldActive').removeClass('oldActive');
      $('.slide').fadeOut(speed);
      $('.active').fadeIn(speed);
  }
  
  // Switch to prev slide
  function prevSlide () {
      $('.active').removeClass('active').addClass('oldActive');
      if ($('.oldActive').is(':first-child')) {
          $('.slide').last().addClass('active');
      } else {
          $('.oldActive').prev().addClass('active');
      }
      $('.oldActive').removeClass('oldActive');
      $('.slide').fadeOut(speed);
      $('.active').fadeIn(speed);
  }
  });
  </code></pre>