CODEWITHSUNDEEP
javascriptjquery
COSTADOR
COSTADOR

Reputation: 317

Do not execute function (click) until previous event is completed

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.

$(".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();
            }
            }); 
    });

Upvotes: 0

Views: 1186

Answers (2)

Hodaya Shalom
Hodaya Shalom

Reputation: 4417

You can initialize a variable to True when starting the Click, in Complete return it to False.

Every time he comes to click, check if True, then exit the function.

var isClicking=false;

$(".vid1 .next, .vid2 .next").click(function(){

  if(isClicking)
   return;
   isClicking=true;
        $(".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();
            isClicking=false;
            }
            }); 
    });

Upvotes: 1

Iswanto San
Iswanto San

Reputation: 18569

Try to disable the button first and enable the button after finish.

$(".vid1 .next, .vid2 .next").click(function(){
 $(this).attr("disabled", true);   
 $(".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();
            }
            }); 
  $(this).removeAttr("disabled");
    });

Upvotes: 0

Related Questions