javascript - jQuery onClick 执行

Question

我有这段用 jQuery 1.2.5 编写的 javascript。它包含在我编写的插件的 main function() 中。该插件是一个与 jCarousel 非常相似的水平画廊滚动器。它会自动计算宽度，并根据它和图像的大小确定要滚动的数量，这是所有计算正在进行的内容。

我的问题是，如何防止在之前的执行完成之前触发它。例如，如果我得到一点点快乐，然后疯狂地捣碎.digi_next. 当这种情况发生时，UI 中的事情不会那么顺利，我想修复它 :) 我认为答案可能在于queue，但我所有使用它的尝试都没有任何价值。

    var self = this;
    $(".digi_next", this.container).click(function(){

        var curLeft = $(".digi_container", self.container).css("left").split("px")[0];
        var newLeft = (curLeft*1) - (self.containerPad + self.containerWidth) * self.show_photos;

        if (newLeft < ((self.digi_gal_width - (self.containerPad + self.containerWidth) * self.show_photos)) * -1) {
            newLeft = ((self.digi_gal_width - (self.containerPad + self.containerWidth) * self.show_photos)) * -1;
        }

        $(".digi_container", self.container).animate({
            left: newLeft + "px"
        }, self.rotateSpeed);
    });

score 10 · Accepted Answer

只需使用全局繁忙标志。当您输入您的点击处理程序时，请检查它，并且仅在它为 false 时继续。立即将其设置为 true，然后在动画结束时将其设置回 false。JavaScript 是单线程的，因此无需担心竞争条件。

var busy = false;
$("...").onclick(function() {
    if (busy) return false;
    busy = true;
    $("...").animate(..., ..., ..., function() {
        busy= false;
    });
    return false;
});

score 5 · Accepted Answer

看看jQuery UI。特别是插件的效果部分。我在我的个人网站上使用幻灯片效果（单击框两侧的箭头）。

我使用一个事件处理程序和一个回调函数防止用户在效果结束之前多次触发效果。

这是源代码

score 2 · Accepted Answer

作为上述全局标志的替代方案，您可以将值分配给 DOM 元素，这样可以使页面上的多个元素具有相同的行为：

$("...").onclick(function(el) {
    var self = el;
    if (self.busy) return false;
    self.busy = true;
    $("...").animate(..., ..., ..., function() {
        self.busy= false;
    });
    return false;
});

score 1 · Accepted Answer

由于 JavaScript 函数调用是异步的，因此您可以将在前一个调用结束时调用的回调函数作为 in 参数传递（对于错误也是如此）。

您可以将您在这篇文章中编写的函数作为之前触发的函数的回调传递。

希望这可以帮助。

问候

javascript - jQuery onClick 执行

4 回答 4

Related

Reference