Question

嗨我有一个函数Save在2s超时后触发onchange事件或oninput。问题是在这种情况下，函数Save会被触发两次：

输入内容
等待2s
oninput触发保存事件
点击输入
onchange触发保存事件

我只需要保存一次，具体取决于先发生的事情。如果用户输入内容并立即离开输入，则应通过onchange和oninput timeout取消保存。但是如果输入某些内容并等待2秒，那么通过oninput和onchange进行保存不应该被触发。

我需要一些简单而干净的解决方案。它存在吗？谢谢:)）

jQuery('#text').on('change', function() {
        save();
});

jQuery('#text').on('input', function(){
    clearTimeout(this.delayer);

    var context = this;
    this.delayer = setTimeout(function () {
        jQuery(context).trigger('change');
    }, 2000);
});


function save(){
    jQuery('#a').text('saved on ' + new Date().getTime());
}

Answer 1

您可以设置一个标志以指示是否需要保存：

jQuery('#text').on('change', function() {
    save();
});

jQuery('#text').on('input', function(){
    jQuery(this).data('unsaved', true);
    clearTimeout(this.delayer);

    var context = this;
    this.delayer = setTimeout(function () {
        jQuery(context).trigger('change');
    }, 2000);
});

function save(){
    if (jQuery('#text').data('unsaved')) {
        jQuery('#a').text('saved on ' + new Date().getTime());
        jQuery('#text').data('unsaved', false);
    }
}

演示：http://jsfiddle.net/TQ9KR/1/

更新：为了满足您处理其他JavaScript函数的字段值更改的要求，您可以执行以下操作（保留原始的'change'和'input'处理程序：

function save(){
    var $text = jQuery('#text');
    if ($text.data('prevVal') != $text.val()) {
        jQuery('#a').text('saved on ' + new Date().getTime());
        $text.data('prevVal', $text.val());
    }
}

也就是说，只有当字段的当前值与上次保存的内容不同时才会保存（第一次围绕它时会自动不同，因为之前没有保存的值）。

演示：http://jsfiddle.net/TQ9KR/2/

Answer 2

你能否添加数据属性，例如data-hasChanged并检查它？

Answer 3

老实说，只有我能想到的解决方案是初始化表示已保存hapen的全局布尔变量

var hasSaveHapen = false;

现在当任何这些函数试图保存时使用它：

if(!hasSaveHapen){
   do your save action
   hasSaveHapen = false;
}

Javascript oninput（setTimeout 2s）/ onchange - fire as first first

3 个答案: