扒一扒函数防抖和函数节流

在前端的真实场景里，我们可能不会希望频繁触发执行函数，比如说输出框输入时自动填充词，还有其他click、mousemove、mouseover、scroll等等情况的处理。通常为了解决这种问题，我们可以采用的套路，就是防抖和节流了。

函数防抖

简单来说，就是触发事件后，在没有再次触发事件的一段时间（n秒内）函数只能执行一次。具体流程如下：

否

是

判断n秒内是否有将执行函数

将它设为将执行函数

放弃之前的将执行函数

应用场景举例

设想下，如果有以下个场景：
1、用户在输入框输入内容时，下面给推荐词语，但不能过于频繁向后端查询推荐词，这个适合就可以使用防抖。输入停止n秒，再向后端请求。
2、用户点击按钮请求数据时，如果会疯了似的点击按钮，这个时候也可以用函数防抖，防治他人的手抖动导致函数执行过于频繁。
3、如果在一个parentDIV上mouseover时显示childDIV，mouseout的时隐藏，可是你要从parentDIV移至childDIV的过程中childDIV不隐藏，也可以考虑。
总结来说，需要触发执行函数，但不需要太频繁，同时保持最近的触发。

实现代码

两个实现方法都依靠闭包和定时器来实现，代码简单，天资聪颖的你们自行领悟。

function debounce(func, wait, context=null) {
    let timeout;
    return function(...args) {
        if (timeout) clearTimeout(timeout);
        //else func.apply(context, args)；
        timeout = setTimeout(() => {
                clearTimeout(timeout);
                //函数也可以不放在定时器中，而放在外部---立即执行
                func.apply(context, args);
                timeout = null;
            }, wait)

    }
}
//使用方法
document.onscroll = debounce(yourFunc,1000,this);

函数节流

函数节流，就是在触发事件的一段时间（n秒内）函数内只能执行一次。

否

是

判断n秒内是否有将执行函数

将它设为将执行函数

不理会这次触发

应用场景举例

再次结合你们的想象，如果有以下个场景：
1、在实现一个下拉加载，或者是滚动在最底部请求最新数据时，就可以用函数节流了，因为在一段时间内用户可能会一直在下拉或者滚动，不需要一直去触发处理函数。
2、还有比如在canvas上绘制了几个图形，你要在鼠标划过或停留在某个图形上显示选中样式，没必要一直mousemove是做判断，这样也可以用节流。

实现代码

function throttle(func, wait, context=null) {
    let timeout;
    return function(...args) {
        if (!timeout) {
            timeout = setTimeout(() => {              
                clearTimeout(timeout);
                func.apply(context, args);
                timeout = null;
            }, wait)
        }

    }
}

请大家一定保持批判思维观看，网上的信息不一定完全正确，毕竟你永远不知道在写文章的人是兔子还是咸鱼！