jQuery onClick执行

时间:2020-03-06 14:37:07  来源:igfitidea点击:

我有一些用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);
    });

谢谢!

解决方案

由于JavaScript函数调用是异步的,因此我们可以将在上一次调用结束时调用的回调函数作为in参数传递(错误相同)。

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

希望这可以帮助。

问候

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

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

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

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

这是源代码

作为引用的全局标记的替代方法,我们可以将值分配给DOM元素,这样可以使页面上的多个元素具有相同的行为:

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