2008-09-23 75 views
1

我有用jQuery 1.2.5編寫的JavaScript的這一點。它包含在我寫的插件的主函數()中。該插件是一個非常類似於jCarousel的水平畫廊滾動條。它會自動計算寬度,並根據圖像大小確定需要滾動的數量,這就是所有計算的結果。jQuery onClick執行

我的問題是,如何防止在先前的執行完成之前觸發它。例如,如果我點擊一下快樂,並在.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修復 – 2008-09-23 18:53:32

回答

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

2

至於afformentioned全局標誌的替代方法,您可以分配值的DOM元素,這樣使頁面上的多個元素具有相同的行爲:

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