title: Do not execute function (click) until previous event is completed
body: <p>Do not execute until previous is completed. If you click quickly, the script is incorrect. If I click several times, the function will be executed without waiting for completion. It becomes messy.</p>
  
  <pre><code>$(".vid1 .next, .vid2 .next").click(function(){
          $(".type2").find(".crop").find(".left").find("div:last").clone().insertAfter($(".type1").find(".crop").find(".left").find("div:last"));
          $(".type2 .crop .left div:first").animate({marginLeft: '0px'}, 0);
          $(".type1").find(".crop").find(".left").find("div:first").clone().insertBefore($(".type2").find(".crop").find(".left").find("div:first"));
          $(".type2").find(".crop").find(".left").find("div:first").animate({marginLeft: '0px'}, 0);
          $(".type1").find(".crop").find(".left").find("div:first").animate(
              {marginLeft: '0px'}, {
              duration: 500,
              complete: function() { 
              $(".type1").find(".crop").find(".left").find("div:first").remove();
              $(".type1").find(".crop").find(".left").find("div:first").animate({marginLeft: '208px'}, 0);
              }
              }); 
          $(".type2").find(".crop").find(".left").find("div:first").animate(
              {marginLeft: '208px'}, {
              duration: 500,
              complete: function() { 
              $(".type2").find(".crop").find(".left").find("div:last").remove();
              }
              }); 
      });
  </code></pre>