如何确保 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);