title: using Deferred method to make sure function completes?
body: <p>So I have a slider setup and it all works fine until I start clicking the previous and next button multiple times before the slide has finished animating in (I am using the slideMove function to do this) ... I have read up on the Deferred method but I cant for the life of me figure out how to get this to work... or even if it is the way to go... can anyone see how to solve this?</p>
  
  <p>I would add it to jfiddle, but I call in my images via ajax.</p>
  
  <pre><code>$(document).ready(function(){
  
  var folder = "imgs/";
  var imgArr = [];
  var imgPath = [];
  
  function loadImages() {
    //my ajax is here calling the images into the array
  }
  
  
  $.when( loadImages() ).done(function(a1){
  
  //responsive width  
  var theWidth = $(window).width();
  $('#autoSlider , .moveLeft , .sliderContainer ').css({'width': theWidth });
  $( window ).resize(function() { 
    theWidth = $(this).width();
    $('#autoSlider , .moveLeft , .sliderContainer ').css({'width': theWidth });
    $('.shrink').css({'width': theWidth - 40 });
    console.log(theWidth);
  });
  
  var slideTime = 3000;
  var imgInd = 0;
  var shrink = {'width': theWidth - 40, 'height': 'calc(80vh - 20px)', 'left': '20px', 'bottom': '25px'};
  
  
  prevNext = 0; //if this is 0 go to next if it is 1 goto prev
  
   var slideMove = function(){
  
      var turnary = (prevNext === 0)? imgInd++ : imgInd-- ; 
  
      if ( imgInd &gt;= imgArr.length ){ imgInd = 0; }
      if ( imgInd &lt; 0 ){ imgInd = imgArr.length - 1; }
      clearInterval(auto);
      $('.imageholder').prepend('&lt;div class = "moveLeft"&gt;&lt;/div&gt;');
      $('.moveLeft').css({'width': theWidth });
  
      if(prevNext === 0){$('.moveLeft').css({ 'background-image': 'url(' + imgPath[imgInd] + ')' , 'left' : theWidth });}
      else if(prevNext === 1){$('.moveLeft').css({ 'background-image': 'url(' + imgPath[imgInd] + ')' , 'left' : 0 - theWidth });}
  
      prevNext = 0;
      $('#autoSlider').addClass( "shrink" , 200);
      $('.moveLeft').animate({ 'left' : '0px' }, "slow" , function(){ 
          $('#autoSlider').css({ 'background-image': 'url(' + imgPath[imgInd] + ')'});
          $('#autoSlider').removeClass( "shrink");
          $('.moveLeft').remove(); 
  
          auto = setInterval(slideMove, slideTime);
      }); 
  
  };
  
  $('#autoSlider').css({ 'background-image': 'url(' + imgPath[imgInd] + ')'});
  </code></pre>
  
  <p>//below are the listeners for the prev and next buttons</p>
  
  <pre><code>$('#sliderNext').on( 'click' , function(){ prevNext = 0; slideMove(); });
  $('#sliderPrev').on( 'click' , function(){ prevNext = 1; slideMove(); });
  
  
  var auto = setInterval(slideMove, slideTime);
  
  $('#autoSlider').mouseenter(function(event) {
      clearInterval(auto);
  }).mouseleave(function(event) {
      auto = setInterval(slideMove, slideTime);
  });
  
  
  });
  </code></pre>