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

你在描述中使用了正确的单词。使用stop()

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

在jQuery中防止双重动画

6 个答案: