时间戳

首页 > 解决方案 > 超时完成后多次运行去抖动功能

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

问题描述

我正在尝试运行一个去抖动函数，该函数接受“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}`);
}

标签： javascript

解决方案

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

尝试将其更改为以下内容：

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

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

劳埃德

推荐阅读