Javascript oninput(setTimeout 2s)/onchange - 首先发生火灾

Question

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

1. 输入一些内容
2. 等待2秒
3. oninput 触发保存事件
4. 点击退出输入
5. onchange 触发保存事件

我只需要保存一次，具体取决于首先发生的情况。如果用户输入内容并立即离开输入，则应取消通过 onchange 保存和 oninput 超时。但是，如果输入内容并等待 2 秒，则不应触发 oninput 和 onchange 保存。

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

编辑:这是我的代码 http://jsfiddle.net/TQ9KR/

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' 和 '输入'处理程序:

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/