jQuery - 我怎樣才能確保一個函數只運行一次與多個綁定和事件觸發？

Question

因此，我正在使用信用卡號碼文本輸入字段中的jQuery.payment。當用戶輸入任何第四個數字（4,8,12）時，該插件會自動放置在一個空間中，以獲得美觀​​。因此，只有keyup事件觸發，而不是input事件。但是，如果用戶要右鍵單擊並粘貼值，則只會觸發input事件。所以我們有其中一個或另一個事件發生的情況，或者兩個事件都發生。

我有一個change keyup input勢必匿名函數，以確保所有用例都包括在內，但我希望函數只有每個鍵時運行一次，但正常的按鍵防火雙方keyup和input。 jQuery的.one()不是一個選項，因爲這個功能需要運行多次，而不是一次按鍵兩次。我怎樣才能確保這個功能只運行一次，即使這兩個事件是從一個按鍵觸發的？

我知道我可以編輯jQuery.payment並觸發input事件，但我不想修改供應商插件，以防我決定更改版本或某些事情。

Answer 1

你可以玩整天附着/分離事件處理程序，並從來沒有擊中成功的公式。

如果您的事件處理程序是idempotent（對於給定的輸入狀態），那麼您不必擔心觸發它兩次。

如果處理程序不是自然冪等的，則可以包含一個條件，以確保具有相同輸入值的第二次連續調用不做任何事情。這是有點人爲的，但這可以被視爲「強迫冪等性」。

爲了達到這個目的，輸入元素的「最後狀態」（它的值）需要被存儲，讀回和測試。

您可以將狀態存儲在某些外部/全局javascript var中，但更適合使用元素本身的'.data（）'屬性（實際上是100％js，不會推入DOM）。

$(function() { 
    $("#myInput").on("keyup input", function(e) { 
     var $this = $(this), 
      $lastState = $this.data('lastState') || '',//read back the element's previous state (or empty string if this is the first call) 
      val = $this.val();//current state 
     if(val !== $lastState) {//the all-important test. 
      $this.data('lastState', val);//store current state to be read back at next call 
      //here do whatever is required of your event handler. 
     } 
    }); 
}); 

Answer 2

我會使用jQuery更改事件，並始終確保事件沒有綁定過。而且我不會遵循像「當用戶按下第4位數字」這樣的邏輯。相反，我會每次格式化整個文本。

function MyInputChanged(){ 
    var currentText = $("#myInput").val(); 
    var newText = someFunctionToFormatText(currentText); 
    $("#myInput").val(newText); 
} 

$("#myInput").unbind("change", MyInputChanged); 
$("#myInput").bind("change", MyInputChanged);