防止通過雙擊執行兩次jQuery post請求

我已經搜索了相同的問題，但未找到適用於我的特定情況的單個問題。防止通過雙擊執行兩次jQuery post請求

我有一個元素

<span id="myButton">Click</span>

和一個jQuery請求後綁定到它

$(document).ready(function() 
     { 
     $(document).on('click', '#myButton', function(e) 
     { 
     $.post("RESPONDING_WEBPAGE_HERE.php").done(function(result) 
      { 
      console.log(result); 
      }); 
     }); 
     });

現在，每次單擊該按鈕，它使一個請求後。說得通。如果執行結果函數（.done（）），我想要的只是執行後請求的一個很好的解決方案。

當然，我知道要處理該變量，如var isAjaxRequest = false;將其設置爲true，並在返回false的結果函數，但也許有一個更好的（jQuery內置）的方式來做到這一點。

這是我現在的解決方案。如果有更好的，我會非常棒。

var isAjaxRequest = false;  
$(document).ready(function() 
      { 
      $(document).on('click', '#myButton', function(e) 
      { 
      if(!isAjaxRequest) 
       { 
       isAjaxRequest = true; 
       $.post("RESPONDING_WEBPAGE_HERE.php").done(function(result) 
       { 
       isAjaxRequest = false; 
       console.log(result); 
       }); 
       } 
      }); 
      });

謝謝=）

來源

2015-04-06 Display name

使用.attr（）在第一次點擊後禁用按鈕 – AAB

我喜歡用.one()附加事件處理程序，並在ajax調用完成後重新附加事件。即使您的目標不支持禁用，這也將處理所有情況：

//define handler function 
var myButtonHandler = function(e) { 
    $.post("RESPONDING_WEBPAGE_HERE.php").done(function() { 
    attachButtonHandler("#mybutton"); //re-attach the click event after AJAX complete 
    }); 
} 

//attach an event handler that's only good for one click 
function attachButtonHandler(selector) { 
    $(document).one('click', selector, myButtonHandler); 
} 

//on doc ready, attach the event handler for the first time 
$(function() { 
    attachButtonHandler("#mybutton"); 
});

來源

2015-04-06 20:33:14 dave

在每次調用之後重新附加處理程序...並不是那麼昂貴，或者JavaScript/jQuery只在內核中存儲函數指針？ –

jQuery在這裏沒有任何魔法，重新附加事件處理程序有一些開銷，但我已經使用了很多，沒有遇到任何性能問題。這一切都取決於音量 - 你的網頁每秒鐘會做幾百次？如果沒有，我懷疑你會注意到任何性能差異。 – dave

我常用的設置按鈕，殘疾人被點擊，然後卸下回調POST請求disabled屬性時。

$(document).on('click', '#button', function() { 
    $('#button').attr('disabled', true); 

    $.post('something').done(function() { 
    $('#button').removeAttr('disabled'); 
    }).fail(function() { 
    $('#button').removeAttr('disabled'); 
    }); 
});

這將防止按鈕被點擊後再次被點擊。

根據評論;如果您希望在span元素或其他不允許disabled屬性的元素上出現此行爲，則可以在單擊時設置類。

$(document).on('click', 'span#button:not(.disabled)', function() { 
    $(this).addClass('disabled'); 

    $.post('something').done(function() { 
    $(this).removeClass('disabled'); 
    }).fail(function() { 
    $(this).removeClass('disabled'); 
    }); 
});

上面的代碼將確保元素只能被點擊，如果它不具備disabled類。這也適用於按鈕元素，因此不需要爲這兩種方法重複代碼。

來源

2015-04-06 20:24:42

謝謝。至少比我的版本好，但也許有更好的解決方案。我只想等幾分鐘。順便說一句：我有一些不是按鈕的元素（跨度等）。它會工作嗎？ –

跨度元素沒有禁用屬性，因此它不適用於它們。如果Span元素充當按鈕，那麼爲什麼不使用按鈕？ –

這是我一個月前應該考慮的事情。重構需要很長時間才能完成我的代碼。對不起。順便說一句：如果你認爲一個圖標......對我來說是一個按鈕，儘管它可行，但這沒有意義。 –

防止通過雙擊執行兩次jQuery post請求

回答

相關問題