javascript - 防止 jQuery 中的双重动画

Question

当用户点击太快时，如何阻止此功能发生两次？

$(document).ready(function() {
    $(".jTscroller a").click(function(event) {
        event.preventDefault();
        var target = $(this).attr("href");
        $("#photo").fadeTo("fast", 0, function() {
            $("#photo").attr("src",target);
            $("#photo").load(function() {
                $("#photo").fadeTo("fast", 1);
            });
        });
    });
});

我遇到的问题是，如果用户点击太快，元素不会淡入，它只是保持隐藏状态。

问题不是我想的那样。当我点击同一个缩略图时，它会尝试加载同一个图像并永远加载。答案确实修复了双重动画，.stop()所以我接受了这个答案，但我的解决方案是检查最后点击的项目是否是当前显示的项目。新脚本：

$(document).ready(function() {
    $(".jTscroller a").click(function(event) {
        event.preventDefault();
        var last = $("#photo").attr("src");                 
        var target = $(this).attr("href");
        if (last != target) {
            $("#photo").stop().fadeTo("fast", 0, function() {
                $("#photo").attr("src",target);
                $("#photo").load(function() {
                    $("#photo").fadeTo("fast", 1);
                });
            });
        };
    });
});

Answer 1

好吧，您在描述中使用了正确的词。使用停止（）

$("#photo").stop().fadeTo("fast", 0, function() {

Answer 2

您可以使用setTimeout函数在点击抓取之间进行延迟。我的意思是，第二次点击只会在第一次点击之后的某个时间后处理。它设置点击之间的间隔。

Answer 3

我相信你正在寻找的是.stop() http://api.jquery.com/stop/

$("#photo").stop(false, false).fadeTo()

Answer 4

$(document).ready(function() {
    var loaded = true;
    $(".jTscroller a").click(function(event) {
        if(!loaded) return;
        loaded = false;
        event.preventDefault();
        var target = $(this).attr("href");
        $("#photo").fadeTo("fast", 0, function() {
            $("#photo").attr("src",target);
            $("#photo").load(function() {
                $("#photo").fadeTo("fast", 1);
                loaded = true;
            });
        });
    });
});

跟踪其状态

Answer 5

我会这样阻止它：

var photo = $("#photo");
if (0 == photo.queue("fx").length) {
     foto.fadeTo();
}

我的不同之处在于stop它只会在该元素上的所有动画都完成时触发。将元素存储在变量中也会节省一些时间，因为选择器只需要抓取一次元素。

Answer 6

使用on()和off()：

$(document).ready(function() {
    $(".jTscroller a").on('click', changeImage);

    function changeImage(e) {
        e.preventDefault();
        $(e.target).off('click');
        $("#photo").fadeOut("fast", function() {
            this.src = e.target.href;
            this.onload = function() {
                $(this).fadeIn("fast");
                $(e.target).on('click', changeImage);
            });
        });
    }
});