javascript - Javascript oninput(setTimeout 2s) / onchange - 最初に来る火

Question

こんにちは、2 秒のタイムアウト後に onchange イベントまたは oninput をトリガーする Save 関数があります。問題は、このシナリオで Save 関数が 2 回トリガーされることです。

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'と'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

正直なところ、私が考えることができる唯一のクリーンな解決策は、保存が発生したことを示すグローバルブール変数を初期化することです

var hasSaveHapen = false;

そして今、これらの関数のいずれかが保存しようとするときは、これを使用します:

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

Answer 3

data-hasChanged のようなデータ属性を追加して確認できませんか?