JQuery 停止动画队列(多次单击)

Question

我正在创建一个示例静态滑块，其中左右有 20% 的div（显示下一张或上一张幻灯片的一部分的空间）和 60% 的中心包含主幻灯片;

所以，滑块必须是这样的

|

20%|60% 主幻灯片|20%| ：我必须保持这些百分比固定。

单击一次时，一切都可以正常工作，否则当我单击其中一个div时，同时单击主滑块应该只移动60%（向右或向左），但它会触发多个调用，因此主幻灯片随机移动！

如何防止多次单击函数调用，直到宣布完成。

片段：

$(document).ready(function(){
	
	$("#slide-right").on( "click", function(event){
		event.stopImmediatePropagation
		slide('right');
	});
	
	$("#slide-left").on( "click", function(event){
		event.stopImmediatePropagation
		slide('left');
	});
});
function slide(direction){
	
	var slider_width = $("#slide_container").width();
	$( ".slide" ).each(function( index ) {
		var elmnt_left = $(this).position().left;
		//alert(this.id)
		
		var val = 100 * elmnt_left / slider_width;
		var percentage = 0;
		
		// direction slide to left
		if(direction == 'left'){
			if(index == 0) {
				if(val > -100)
					percentage = val - 60;
			}			
			else if(index == 1) {
				if(val > -40)
					percentage = val - 60;
			}				
			else if(index == 2){
				if(val > 20)
					percentage = val - 60;
			}
		}else if (direction == 'right'){ // direction slide to right
			if(index == 0) {
				if(val < 20 )
					percentage = val + 60;
			}			
			else if(index == 1) {
				if(val < 80)
					percentage = val + 60;
			}				
			else if(index == 2){
				if(val < 140)
					percentage = val + 60;
			}
		}	
		
		console.log()
		
		if(percentage !== 0){	
			$( this ).animate({
				left: percentage+'%'
			}, 400, function() {
				// Animation complete.
				
			});
		}
		
	});
};

html,body {
	width:100%;
	height:100%;
	margin:0px;
}
.main{
	width:100%;
}
#slide_container{
	position:relative;
	width:100%;
	height:300px;
	overflow:hidden;
	text-align:center;
}
#slide_container .slide {
	position:absolute;
	width: 60%;
	border:0px solid #ccc;
	height:100%;
	display:inline-block;
	margin:0;
	opacity:0.7;
}
#slide_container .slide1 {
	background-color:green;
	left:20%;
}
#slide_container .slide2 {
	background-color:gray;
	left:80%;
	
}
#slide_container .slide3 {
	background-color:pink;
	left:140%;
	
}
#slide_container  #slide-left {
	display:inline-block;
	height: 100%;
	width: 20%;
	left:0;
	position:absolute;
	z-index:100;
}
#slide_container  #slide-right {
	display:inline-block;
	height: 100%;
	width: 20%;
	right:0;
	position:absolute;
	z-index:100;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
	<div class="main">
		<div id="slide_container">
			<span id="slide-left"></span>
			<span id="slide-right"></span>
			<div>
				<div class="slide slide1" id="1" ></div>
				<div class="slide slide2" id="2" ></div>
				<div class="slide slide3" id="3" ></div>
			</div>
		</div>
	</div>

Answer 1

如何防止多次单击函数调用，直到宣布完成？

伪代码：

$("#next").on("click", function(){
   if( $("#slider").is(":animated") ) return;
   // animation logic here
});

Answer 2

您还可以在动画开始时在容器中添加类，并在动画结束时删除该类。因此，此类仅在动画发生时存在。

当函数执行slide时，您可以检查该类是否存在，如果存在，则返回 false。

 $(document).ready(function(){
 $("#slide-right").on( "click", function(event){
    event.stopImmediatePropagation
    slide('right');
});
$("#slide-left").on( "click", function(event){
    event.stopImmediatePropagation
    slide('left');
});
});
function slide(direction){
if($("#slide_container").hasClass("animating")) {
return false;
}else{
$("#slide_container").addClass("animating");
}
var slider_width = $("#slide_container").width();
$( ".slide" ).each(function( index ) {
    var elmnt_left = $(this).position().left;
    //alert(this.id)
    var val = 100 * elmnt_left / slider_width;
    var percentage = 0;
    // direction slide to left
    if(direction == 'left'){
        if(index == 0) {
            if(val > -100)
                percentage = val - 60;
        }           
        else if(index == 1) {
            if(val > -40)
                percentage = val - 60;
        }               
        else if(index == 2){
            if(val > 20)
                percentage = val - 60;
        }
    }else if (direction == 'right'){ // direction slide to right
        if(index == 0) {
            if(val < 20 )
                percentage = val + 60;
        }           
        else if(index == 1) {
            if(val < 80)
                percentage = val + 60;
        }               
        else if(index == 2){
            if(val < 140)
                percentage = val + 60;
        }
    }   
    console.log()
    if(percentage !== 0){   
        $( this ).animate({
            left: percentage+'%'
        }, 400, function() {
            // Animation complete.
             $("#slide_container").removeClass("animating");
        });
    }
   });
};

Answer 3

if(percentage !== 0 && !window.animating)
{   
        $( this ).animate({
            left: percentage+'%'
        }, {
             start: function(){
                window.animating = true;
             },
             complete: function(){
                window.animating = false;
             }
         });
    }

在我看来，在像window这样的"全局"中添加 var 可以解决问题。