js监听input输入事件及使用防抖封装函数处理的实现

// 防抖函数封装
function debounce(fn, delay) {
    let timer = null;
    return function() {
        let context = this;
        let args = arguments;
        if (timer) {
            clearTimeout(timer);
        }
        timer = setTimeout(() => {
            fn.apply(context, args);
        }, delay);
    };
}
 
// 输入事件处理函数
function handleInput(event) {
    console.log('Input value:', event.target.value);
}
 
// 绑定输入事件
const inputElement = document.getElementById('myInput');
inputElement.addEventListener('input', debounce(handleInput, 500));

这段代码首先定义了一个debounce函数，它通过闭包的方式保存了一个计时器，用于在事件被触发N毫秒后才执行真正的回调函数。handleInput是一个处理输入事件的函数，当输入字段变化时，会在控制台打印当前的输入值。最后，我们通过getElementById获取了页面上的输入元素，并使用addEventListener将防抖包装后的handleInput函数作为输入事件的处理函数，同时设置了防抖延时为500毫秒。