jQuery onClick执行


1

我有用jQuery 1.2.5编写的JavaScript的这一点。它包含在我写的插件的主函数()中。该插件是一个非常类似于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); 
    }); 

谢谢!

  0

侧面说明:我强烈推荐jQuery v1.2.6,因为1.2.5的版本被破坏,1.2.6有重要的bug修复 23 9月. 082008-09-23 18:53:32

  0

我会研究它,谢谢。我只是使用1.2.5,因为它在我们的解决方案中,并没有真正有能力去改变它,但我知道谁会......>。> 23 9月. 082008-09-23 19:00:55

10

只需使用全局忙标志。当你输入你的点击处理程序时,检查它,只有在它是假的时才进行。立即将其设置为true,然后在动画结束时将其设置为false。 JavaScript是单线程的,所以没有比赛条件需要担心。

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

1

由于JavaScript函数调用是asyncronus,因此可以将前一个调用结束时调用的回调函数作为in参数传递(对于错误也是如此)。

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

希望这会有所帮助。

Regards


5

看看jQuery UI。插入的具体为the effects-part。我使用my personal website上的滑动效果(点击框两侧的箭头)。

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

Here's the source-code


2

至于afformentioned全局标志的替代方法,您可以分配值的DOM元素,这样使页面上的多个元素具有相同的行为:

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