Javascript在處理函數時防止點擊

Question

我是JavaScript的新手，請耐心等待。

我有一個類似於下面的代碼，每當我點擊一個按鈕，它會在HTML元素上執行一些動畫，問題是，如果用戶多次點擊，動畫將被緩衝並執行很大的延遲一次全部。

下面的代碼「應該」通過禁用循環來解決問題，直到動畫完成，但它不。我不能更改代碼的結構，它必須或多或少地保持這種形式。

var processing = false; 

$("p").click(function() { 
    if (processing == false) { 
    for (i=0; i<5; i++) { 
     if (processing == false) 
     processing = true; 
     tastor(); 
    } 
    processing = false; 
    } 
}); 


function tastor() { 
    zubi = parseFloat($('p').css('font-size')); 
    $('p').animate({'font-size': zubi+i}, 500); 
} 

Answer 1

可以使用:animated jQuery的僞選擇打破早期的情況下，該元素已經動畫：

$("p").click(function() { 
    if ($(this).is(':animated')) return; 

    // The rest of your normal code. 
}); 

演示：http://jsfiddle.net/MgmET/4/

Answer 2

「動畫」 可以啓動事件持續半秒鐘，但實際上並不需要半秒鐘的時間來執行。因此，在下次點擊發生之前，每次點擊「tastor」調用都會執行得相當快。

解決此問題的一種方法是依賴動畫的「完整」屬性。你可以傳遞一個函數來動畫，直到動畫結束纔會執行。 For example：

var processing = false; 
var increment = 1; 
function step (count) { 
    if (count > 0) { 
     tastor(function() { step(count - 1) }); 
    } else { 
     processing = false; 
    } 
} 
$("p").click(function() { 
    if (processing == false) { 
     processing = true; 
     step(5); 
    } 
}); 
function tastor(callback) { 
    zubi = parseFloat($('p').css('font-size')); 
    $('p').animate({'font-size': zubi+increment}, 500, callback); 
}