防止雙擊（無onclick）

我誤讀了@goddfree在下面發佈的內容。他的解決方案完美地工作，與我取得在於設置isDone回真被放置在animate函數的回調，像這樣唯一的變化：防止雙擊（無onclick）

$.when($('#carousel_ul_' + unique_id + ' li:last').clone().insertBefore('#carousel_ul_' + unique_id + ' li:first'), $('#carousel_ul_' + unique_id).css('left', '-=' + displace_width + 'px')).done($('#carousel_ul_' + unique_id + ':not(:animated)').animate({left: '+=' + scroll_width + 'px'}, 400, function(){$('#carousel_ul_' + unique_id + ' li:last').remove(); is_done = true; }));

這是一個非常優雅的解決方案，謝謝@goddfree

來源

2013-11-24 Jargon Scott

HTML定位標籤也有onClick事件。你有嘗試過這樣的嗎？從這裏你應該能夠使用你找到的解決方案。

<a href="#" onclick='carousel("left", 99335)'><!--stuff here--></a>

更新：

我想這可能是你在找什麼。說你有三個按鈕（我只是做了carousel參數，我不知道他們的意思）：

<a href="#" onclick='carousel("left", 99335)'>Button 1</a> 
<a href="#" onclick='carousel("right", 69235)'>Button 2</a> 
<a href="#" onclick='carousel("left", 91235)'>Button 3</a>

我們添加一個名爲isDone以檢查是否有任何進程正在運行或不變量。修改carousel功能，像這樣（我來解釋一下使用意見修改）：

//isDone is initially set to true, because nothing is running. 
var isDone = TRUE; 

function carousel(direction, unique_id) { 
//First of all, we can only execute the function is isDone is true. So we check for that: 
if(isDone) { 
//This implements the moment the function is called. We now know that it is currently in progress. 
isDone = FALSE; 
//This is the same as you had before 
if (direction == 'right') { 
    $(document).ready(function(){ 
     var displace_width = $('#carousel_ul_' + unique_id + ' li:last').outerWidth(true); 
     var scroll_width = $('#carousel_ul_' + unique_id + ' li:first').outerWidth(true); 
     //Here we set isDone equal to true when the .done is called: 
     $.when($('#carousel_ul_' + unique_id + ' li:last').clone().insertBefore('#carousel_ul_' + unique_id + ' li:first'), $('#carousel_ul_' + unique_id).css('left', '-=' + displace_width + 'px')).done(isDone = TRUE; $('#carousel_ul_' + unique_id + ':not(:animated)').animate({left: '+=' + scroll_width + 'px'}, 400, function(){$('#carousel_ul_' + unique_id + ' li:last').remove(); })); 
    }); 
} else { 
    $(document).ready(function(){ 
     var displace_width = $('#carousel_ul_' + unique_id + ' li:first').outerWidth(true); 
     var scroll_width = $('#carousel_ul_' + unique_id + ' li:nth-child(2n)').outerWidth(true); 
     //Same thing here 
     $.when($('#carousel_ul_' + unique_id + ' li:first').clone().insertAfter($('#carousel_ul_' + unique_id + ' li:last'))).done(isDone = TRUE; $('#carousel_ul_' + unique_id + ':not(:animated)').animate({left: '-=' + scroll_width + 'px'}, 400, function(){$('#carousel_ul_' + unique_id + ' li:first').remove(); $('#carousel_ul_' + unique_id).css('left', '+=' + displace_width + 'px'); })); 
    }); 
} 
} 
//If isDone is not true, then we tell the user that and don't execute anything: 
else { 
    alert("Not so fast! There is a process currently in progress."); 
} 
}

這種方式，因爲所有的按鈕調用相同carousel功能，它們將僅isDone設置爲true執行。否則，用戶將收到錯誤警報並且什麼都不會發生。

來源

2013-11-24 22:56:31 Charles

更具體地說，我可以找到解決方案，如果我給每個這樣的鏈接一個唯一的ID將是可用的。（請參閱以下鏈接查看一個這樣的示例。）我只想在任何人通過PHP爲所有鏈接生成ID之前，看看是否有人有更好的解決方案，這對我來說似乎是一種類似於rube goldberg-y（例如：http：///stackoverflow.com/questions/16715075/preventing-multiple-clicks-on-button） –

如果我不完全瞭解您的問題，請原諒我，但是您可以使用在您發佈的鏈接中建議的解決方案被點擊後短時間內被禁用？ – Charles

我看到的解決方案通過禁用特定的調用按鈕或鏈接來工作。此功能在整個頁面中被廣泛調用，因此需要一些扭曲來禁用每個調用它的鏈接，然後在經過一段時間後重新啓用這些鏈接。我想這可能是可行的，但我想我會看看別人是否有更好的解決方案。 –

防止雙擊（無onclick）

回答

相關問題