多次事件的反弹行动

时间:2013-10-17 18:48:24

标签: javascript debouncing

如何去除可以从多个事件中启动的操作?这是一个示例,仅用于演示行为: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 个答案:

答案 0 :(得分:3)

你必须附上相同的去抖处理程序,比如

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

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

如果你想分享计时器。

但是,如果您想在输入失去焦点时避免重复调用,我认为您应该只使用其中一个onchangeonblur事件。