jQuery onClick 执行

Posted 2023-05-08

【中文标题】jQuery onClick 执行

【英文标题】：jQuery onClick execution

【发布时间】：2010-09-12 11:34:55

【问题描述】：

我有这段用 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);
    );

【问题讨论】：

旁注：我强烈推荐 jQuery v1.2.6，因为 1.2.5 的版本被破坏了，并且 1.2.6 有重要的错误修复

我会调查的，谢谢。我只是在使用 1.2.5，因为它在我们的解决方案中并且没有真正的能力来改变它，但我知道是谁做的...... >.>

【参考方案1】：

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

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

【参考方案2】：

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

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

Here's the source-code

【参考方案3】：

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

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

【参考方案4】：

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

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

希望这会有所帮助。

问候