1

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

  1. 输入一些东西
  2. 等待 2s
  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());
}
4

3 回答 3

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/

于 2013-08-04T10:49:19.420 回答
0

你不能添加一个数据属性，比如 data-hasChanged 并检查一下吗？

于 2013-08-04T10:49:28.110 回答
0

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

var hasSaveHapen = false;

现在，当任何这些功能尝试保存时，请使用：

if(!hasSaveHapen){
   do your save action
   hasSaveHapen = false;
}
于 2013-08-04T10:51:37.227 回答