5

複数のイベントから開始できるアクションをデバウンスするにはどうすればよいですか? 動作を示すための例を次に示します: http://jsfiddle.net/eXart/2/

<input type="text" id="t">

<div id="x"></div>

<script>
function debounce(fn, delay) {
    var timer = null;
    return function () {
        var context = this, args = arguments;
        clearTimeout(timer);
        timer = setTimeout(function () {
            fn.apply(context, args);
        }, delay);
    };
}

function doStuff(){
    document.getElementById("x").innerHTML +="<br>stuff";
}

    var t = document.getElementById("t");
    t.onchange = debounce(function(){ doStuff() }, 500);
    t.onblur = debounce(function(){ doStuff() }, 500);
</script>

テキスト ボックスにテキストを入力してクリックすると、「stuff」が 1 回ではなく 2 回表示されることがわかります。これは、各イベントが独自のデバウンス インスタンスを取得しているためです。イベント間でデバウンス インスタンスをどのように共有しますか?

4

1 に答える 1

5

このように、同じデバウンスされたハンドラーをアタッチする必要があります

var debouncedFunc = debounce(function(){ doStuff(); }, 500);

t.onchange = debouncedFunc;
t.onblur = debouncedFunc;

タイマーを共有したい場合。

ただし、入力がフォーカスを失ったときに重複した呼び出しを避けたい場合は、 onchangeorイベントのいずれかのみを使用する必要があると思います。onblur

于 2013-10-17T19:47:26.987 に答える