从多个事件中取消退回操作

Debounce actions from multiple events

本文关键字：操作 取消 事件      更新时间：2023-09-26

如何取消可从多个事件启动的操作？下面是一个示例，仅用于演示行为： 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"出现两次而不是一次，因为每个事件都有自己的去抖动实例。如何跨事件共享去抖动实例？

您必须附加相同的已退回处理程序，如下所示

var debouncedFunc = debounce(function(){ doStuff(); }, 500);
t.onchange = debouncedFunc;
t.onblur = debouncedFunc;

如果要共享计时器。

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

相关文章：