乐趣区

关于javascript:JavaScript常用技巧之函数防抖

jiezi

在触发一段时间后执行事件，如果这段时间内又触发了，则持续期待同样的工夫。

防抖在理论开发中应用场景还是蛮多，比方列表的实时搜寻等。延时执行，这很容易想到应用 setTimeout 来实现。

根底版 

function debounce(func, wait) {
    let timer;
    
    return function () {timer && clearTimeout(timer);
        timer = setTimeout(func, wait);
    };
}

测试一下 

// 应用 input 输入框做一个测试
// html
<input id="input" />
<div id="text"></div>

// js
input.oninput = debounce(() => {text.innerHTML = input.value;}, 1000);


嗯。如同没什么问题。不过咱们发现下面在获取 input 的值的时候应用的是 input.value，那其实 oninput 事件应该是存在一个参数是 event，能够间接应用 event.target.value 获取。

// 应用 input 输入框做一个测试
// html
<input id="input" />
<div id="text"></div>

// js
input.oninput = debounce((e) => {text.innerHTML = e.target.value; // Uncaught TypeError: Cannot read property 'target' of undefined}, 1000);

不出预料的报错了，这是因为 debounce 函数返回的是一个新的函数，并没有将原有函数的 this 值绑定到新的函数上，也没有将参数传递给新的函数。咱们来改一改。

解决了 this 和参数的版本 

function debounce(func, wait) {
    let timer;
    
    return function (...args) {timer && clearTimeout(timer);
        
        timer = setTimeout(() => {func.apply(this, args);
        }, wait);
    };
}

这时候又来了个新需要，须要在计时开始时执行，而不是在结尾执行。同样的，原来的逻辑不变，只是须要新增一个立刻执行的逻辑。想一想咱们的需要： 立刻执行，而后在固定的一段时间内不再触发第二次 。在立刻执行代码之后，能够设置一个变量 flag（初始值为 true）用来记录上一次执行的工夫到当初是否超过 wait，如果超过则将 flag 设置为 true，意味着能够再次执行。

function debounce(func, wait, immediate) {
    let timer;

    return function (...args) {timer && clearTimeout(timer);

        if (immediate) {
            // timer 就是咱们应用的 flag
            if (!timer) {func.apply(this, args);
            }
            
            // 在代码执行的 wait s 之后将 timer 设置为 null
            // 当下一次执行以后函数则能够触发判断 !timer === true
            timer = setTimeout(() => {timer = null;}, wait);
        } else {timer = setTimeout(() => {func.apply(this, args);
            }, wait);
        }
    };
}

当然，咱们还能够像 lodash 一样，增加 cancel、pending 等办法。

function debounce(func, wait, immediate) {
    let timer;
    
    const debounced = function (...args) {timer && clearTimeout(timer);
    
        if (immediate) {if (!timer) {func.apply(this, args);
            }
            
            timer = setTimeout(() => {timer = null;}, wait);
        } else {timer = setTimeout(() => {func.apply(this, args);
                timer = null;
            }, wait);
        }
    };
    
    debounced.cancel = function() {timer && clearTimeout(timer);
    }
    
    debounced.pending = function() {return !!timer;}
    
    return debounced;
}

相干：
JavaScript 日常学习之防抖
JavaScript 日常学习之节流

上述代码的残缺代码

退出移动版