js优化--防抖

1.防抖函数的定义

在一定的时间间隔内,如果没有再次触发该函数,那么才会去执行函数体内的代码(例如发送网络请求)* 。

2.防抖函数简单版本的实现

// 高频率触发的事件,在指定的单位时间内，只响应最后一次，如果在指定的时间在触发，则重新计算时间(后面触发的事件执行，替代了前面的事件)
function debounce(fn, time) {
        let timeout = null; // 创建一个标记用来存放定时器的返回值
        return function() {
        clearTimeout(timeout); // 每当用户输入的时候把前一个 setTimeout clear 掉
        timeout = setTimeout(() => { 
            // 然后又创建一个新的 setTimeout, 
            // 这样就能保证输入字符后的 interval 间隔内如果还有字符输入的话，就不会执行 fn 函数
            fn.apply(this, arguments); //arguments是传入的参数
         }, time)};
}
function sayHi() {
    console.log('防抖成功');
}

var inp = document.getElementById('inp');
inp.addEventListener('input', debounce(sayHi, 3000)); // 防抖