Question

我有一些用jQuery 1.2.5编写的javascript。它包含在我编写的插件的main函数（）中。该插件是一个非常类似于jCarousel的水平图库滚动条。它可以自动计算宽度，并根据图像的大小和图像的大小确定滚动的数量，这就是正在进行的所有计算。

我的问题是，如何在上一次执行完成之前阻止它被触发。例如，如果我快点点击一下，就可以疯狂地混淆.digi_next。在发生这种情况时，用户界面的情况不会很好，我想解决它:)我认为答案可能在于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);
    });

Answer 1

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

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

Answer 2

看看jQuery UI。特别是插件的the effects-part。我在my personal website上使用了幻灯片效果（点击方框两侧的箭头）。

我阻止用户在效果结束前多次触发效果 - 使用one event-handler和回调函数。

Here's the source-code

Answer 3

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

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

Answer 4

由于JavaScript函数调用是asyncronus，因此您可以在参数中传递一个回调函数，该函数在前一个调用结束时调用（错误相同）。

您可以将您在此帖中编写的函数作为之前触发的函数的回调传递。

希望这有帮助。

此致

jQuery onClick执行

4 个答案: