javascript - 超时完成后多次运行去抖功能

Question

我正在尝试运行一个去抖函数，该函数接受“SaveValue”的输入，该函数将获取输入的值并将其保存在某个位置。问题是它在去抖超时完成后多次运行“SaveValue”函数。我有很多这样的输入，并且真的不想在代码中放置一堆 onEventListeners 。完成这项工作的最佳方法是什么。

<input id="testInput" onkeyup="debounce(() => { SaveValue(value, 'savehere', 'onhere') } , 300)();" type="text" /> 

function debounce(func, wait, immediate) {
    var timeout;
    return function() {
        var context = this, args = arguments;
        var later = function() {
            timeout = null;
            if (!immediate) func.apply(context, args);
        };
        var callNow = immediate && !timeout;
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
        if (callNow) func.apply(context, args);
    };
};

function SaveValue(value1, value2, value3){
    console.log(`Save value of ${value1} here -> ${value2} on field -> ${value3}`);
}

Answer 1

我对您的代码做了一些测试，似乎在 onkeyup 处理程序中调用 debounce 函数的方式正在创建一个新的实例每个事件的函数调用(以及随后的新计时器)。这将导致多次调用。

尝试将其更改为这样的内容:

const dSaveValue = debounce(() => { SaveValue("value", 'savehere', 'onhere')}, 1000, false)

<input id="testInput" onkeyup="dSaveValue()" type="text" />

劳埃德