来自多个事件的反跳动作答案

【问题标题】：Debounce actions from multiple events来自多个事件的反跳动作
【发布时间】：2013-10-26 10:00:53
【问题描述】：

如何消除可以从多个事件中启动的动作？这是一个仅用于演示行为的示例：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”出现两次而不是一次，因为每个事件都获得了它自己的 debounce 实例。您如何跨事件共享去抖动实例？

【问题讨论】：

标签： javascript debouncing

【解决方案1】：

您必须附加相同的去抖动处理程序，像这样

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

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

如果你想共享计时器。

但我认为，如果您想在输入失去焦点后避免重复调用，您应该只使用onchange 或onblur 事件之一。

【讨论】：

谢谢。是的，我只是将这些特定事件用于 JSFiddle 示例。