jQuery-對具有無名功能的事件偵聽器使用.on和.off

Question

我試圖在我的JS中利用.off()處理ajax請求期間的所有單擊，然后在完成后將其重新打開。 我知道用於此的代碼是ajaxStart().ajaxStop() 。

我.on('click')是我的.on('click')使用一個無名函數來工作。 即： $(document).on('click', '-enter-delegated-elements-here-', function (e) { // Click stuff here, like the click to run the ajax request });

當我用.off （ $(document).off('click', '**'); ）關閉事件監聽器之后，必須重新打開它們時，這會造成問題。 不幸的是，普通的$(document).on('click', '-enter-delegated-elements-here-'); 不起作用。

為了證明我的觀點，我創造了這個小提琴 。

（代碼段也位於此處：）

$('add').on('click', '#add'); //here's the zinger!!!

 var i = 0; $('#add span').text(i); $(document).on('click', '#add', function(e) { $('#catcher').append(i); i += 1; $('#add span').text(i); }); $(document).on('click', '#stop', function(e) { if (!$(document).off('click', '#add')) { $(document).off('click', '#add'); return; } $(this).text('Add five and re-enable catching'); i += 5; $('#add span').text(i); $('add').on('click', '#add'); //here's the zinger!!! }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button id="add"> Add to catcher: <span></span> </button> <button id="stop"> Stop catching </button> <h2>Catcher:</h2> <div id="catcher"></div> 

（雖然沒有ajax請求，但原理仍然相同）

我知道我可以創建一個函數來處理此問題，即：

function forClicks(e) {
  // Click stuff here, like the click to run the ajax request
}
$(document).on('click', '-enter-delegated-elements-here-', forClicks(e));

但是，創建一堆函數（例如，如果您最終擁有多個單擊處理程序- 處理去抖器和諸如此類的東西等）變得不那么實用，並且當您可以使用無名函數時，也會占用全局空間。

有誰知道我可以重新打開它使用匿名函數，使用事件處理程序.on()它已被關閉后與.off() 有沒有辦法做到這一點，或者它需要另一種類型的JS代碼（我知道.toggle()不再起作用，但是也許類似的東西？）。

Answer 1

至少有三種解決方案：

1. 在ajax操作期間禁用按鈕。 這還具有告訴用戶在此期間不可用的有用效果。

2. 使用標志告訴處理程序不要執行任何操作，例如：

    var disableClicks = 0; 

   然后在啟動ajax調用時將其遞增，並在調用結束時（包括在調用失敗時）遞減。

   然后在處理程序中：

    if (disableClicks) { return; } 

3. 如前所述，使用命名函數。

   我知道我可以創建一個函數來處理此問題，即：

   但是，創建一堆函數（例如，如果您最終擁有多個單擊處理程序-處理去抖器和諸如此類的東西等）變得不那么實用，並且當您可以使用無名函數時，也會占用全局空間。

   無需使它們成為全局變量。 您只需將它們放在使用它們的范圍內即可。 您甚至可以將它們包裝成一個漂亮的整潔控制器對象。

＃1的示例（禁用按鈕）：

 var i = 0; $('#add span').text(i); $(document).on('click', '#add', function(e) { $('#catcher').append(i); i += 1; $('#add span').text(i); }); $(document).on('click', '#stop', function(e) { $("#add").prop("disabled", true); setTimeout(function() { $(this).text('Add five and re-enable catching'); i += 5; $('#add span').text(i); $("#add").prop("disabled", false); }, 1000); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button id="add"> Add to catcher: <span></span> </button> <button id="stop"> Stop catching </button> <h2>Catcher:</h2> <div id="catcher"></div> 

＃2的示例（標志/計數器）：

 var disableClicks = 0; var i = 0; $('#add span').text(i); $(document).on('click', '#add', function(e) { if (disableClicks) { return; } $('#catcher').append(i); i += 1; $('#add span').text(i); }); $(document).on('click', '#stop', function(e) { ++disableClicks; setTimeout(function() { $(this).text('Add five and re-enable catching'); i += 5; $('#add span').text(i); --disableClicks; }, 1000); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button id="add"> Add to catcher: <span></span> </button> <button id="stop"> Stop catching </button> <h2>Catcher:</h2> <div id="catcher"></div> 

＃3的示例（控制器對象）：

 var addController = { handler: function(e) { $('#catcher').append(i); i += 1; $('#add span').text(i); }, enable: function() { $(document).on('click', '#add', addController.handler); }, disable: function() { $(document).off('click', '#add', addController.handler); } }; addController.enable(); var i = 0; $('#add span').text(i); $(document).on('click', '#stop', function(e) { addController.disable(); setTimeout(function() { $(this).text('Add five and re-enable catching'); i += 5; $('#add span').text(i); addController.enable(); }, 1000); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button id="add"> Add to catcher: <span></span> </button> <button id="stop"> Stop catching </button> <h2>Catcher:</h2> <div id="catcher"></div>