如何確保 function 只運行一次並觸發多個綁定和事件？

Question

我在信用卡號文本輸入字段上使用jQuery.payment 。 當用戶輸入任何第 4 個數字（4、8、12）時，插件會自動放置一個空格，以便美觀。 因此，只有keyup事件觸發，而不是input事件。 但是，如果用戶要右鍵單擊並粘貼一個值，那么只會觸發input事件。 因此，我們遇到了其中一個或另一個，或兩個事件都觸發的情況。

我有一個綁定匿名 function 用於change keyup input以確保涵蓋所有用例，但我希望 function 每次按下鍵時只運行一次，但正常按鍵會同時觸發keyup和input 。 jQuery 的.one()不是一個選項，因為這個 function 需要運行不止一次，而不是一次按鍵兩次。 我如何確保這個 function 只運行一次，即使兩個事件都是從一個按鍵觸發的？

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

Answer 1

您可以整天使用附加/分離事件處理程序，而永遠不會找到成功的公式。

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

如果處理程序不是自然冪等的，那么您可以包含一個條件，以確保具有相同輸入值的第二個連續調用不執行任何操作。 稍微做作，但這也算是“強制冪等”。

為此，需要存儲、讀取和測試輸入元素的“最后狀態”（其值）。

您可以將 state 存儲在某個外部/全局 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 更改事件並始終確保該事件之前未綁定。 而且我不會遵循“當用戶按下第四位數字”之類的邏輯。 相反，我每次都會格式化整個文本。

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

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