JQuery : 如何限制点击（制作幻灯片）？

Question

我的问题是，如果我非常快地快速连续按 "button"，图像会重叠。如果我快速连续按下 "button"，我就停止按下按钮，但幻灯片将继续工作。

比如我快速按下按钮20次，图像会重叠，幻灯片会工作20次，比按钮按下的速度慢。因此，我想在幻灯片移动时通过单击 "button" 来阻止运行的单击方法。我该怎么办？

$(function(){
    var max =  $("header > img").length -1;
    var sno = 0;
    $("button").on("click",function(){
        $( $("header > img")[sno] ).animate({
            left: "100%"
            },1000,function(){
            $(this).css({left: "-100%"});
        });
        sno++;
        if( sno > max ) sno = 0;
        $( $("header > img")[sno] ).animate({
            left: "0%"
        },1000);
    });
});

Answer 1

您可以设置点击按钮时禁用按钮。

$(function(){
    var max =  $("header > img").length -1;
    var sno = 0;
    $("button").on("click",function(){
        var button = this;
        $(button).prop('disabled', true);
        $( $("header > img")[sno] ).animate({
            left: "100%"
            },1000,function(){
            $(this).css({left: "-100%"});
            $(button).prop('disabled', false);
        });
        sno++;
        if( sno > max ) sno = 0;
        $( $("header > img")[sno] ).animate({
            left: "0%"
        },1000,function(){
            $(button).prop('disabled', false);
        });
    });
}

并在完整的回调函数中释放。

JQuery : 如何限制点击（制作幻灯片）？

JQuery : how to limit CLICK (make slides)?

html

javascript

jquery

click

slide