Question

所以我在信用卡号码文本输入字段中使用jQuery.payment。当用户输入任何第4个数字（4,8,12）时，插件会自动放入一个空间以获得漂亮的外观。因此，只有keyup事件触发，而不是input事件。但是，如果用户右键单击并粘贴了值，则只会触发input事件。所以我们遇到的情况是一个或另一个，或两个事件都在发生。

我有一个change keyup input的绑定匿名函数，以确保涵盖所有用例，但我希望每次按下该键时该函数只运行一次，但是正常的按键同时触发{{1} }和keyup。 jQuery的input不是一个选项，因为这个函数需要多次运行，而不是一次按键两次。即使从一次按键触发两个事件，我怎样才能确保此功能仅运行一次？

我知道我可以编辑jQuery.payment并触发.one()事件，但我不想修改供应商插件，以防我决定更改版本或其他内容。

Answer 1

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

如果您的事件处理程序是idempotent（对于给定的输入状态），那么您不必担心触发它两次。

如果处理程序不是自然幂等的，那么您可以包含一个条件，该条件确保具有相同输入值的第二个连续调用不执行任何操作。它有点做作，但这可以被视为＆＃34;强制幂等＆＃34;。

为实现这一目标，输入元素的最后状态为＆＃34; （它的值）需要存储，读回和测试。

您可以将状态存储在某些外部/全局javascript var中，但它更适合使用＆＃39; .data（）＆＃39;元素本身的属性（实际上是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);

jQuery - 如何在多个绑定和事件触发时确保一个函数只运行一次？

2 个答案: