javascript - 如何确保一个函数仅在多个绑定(bind)和事件触发的情况下运行一次？

Question

我正在与 jQuery.payment 合作在信用卡号文本输入字段上。当用户输入任何第四个数字(4、8、12)时，插件会自动插入一个空格以保持美观。因此，仅触发 keyup 事件，而不触发 input 事件。但是，如果用户右键单击并粘贴值，则只会触发 input 事件。因此，我们会遇到其中一个或另一个或两个事件都触发的情况。

我有一个用于更改按键输入的绑定(bind)匿名函数，以确保覆盖所有用例，但我希望该函数仅在每次按下按键时运行一次，但普通按键会触发keyup 和 input。 jQuery 的 .one() 不是一个选项，因为该函数需要运行多次，而不是一次按键运行两次。即使两个事件都是通过一个按键触发的，我如何确保该函数只运行一次？

我知道我可以编辑 jQuery. payment 并触发 input 事件，但我不想修改 vendor 插件，以防我决定更改版本或将来的某些内容。

Answer 1

您可以整天尝试附加/分离事件处理程序，但永远不会找到成功的公式。

如果您的事件处理程序是 idempotent (对于给定的输入状态)，那么您无需担心触发它两次。

如果处理程序不是自然幂等的，那么您可以包含一个条件，以确保使用相同输入值的第二个连续调用不执行任何操作。虽然有点做作，但这可以看作是“强制幂等”。

为了实现这一点，需要存储、读回和测试输入元素的“最后状态”(其值)。

您可以将状态存储在某些外部/全局 javascript 变量中，但使用元素本身的“.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.
        }
    });
});