防抖与节流

防抖：

概念：防抖是指在事件触发后，在n秒内只执行一次，如果事件触发后在n秒内又被触发，则会重新计算触发事件。

要点：防抖采用setTimeOut作为辅助函数和闭包函数，如果多次触发事件，则用cleanTimeOut清除上一次记录的事件。

<input id='keyword'>
document.querySelector('#keyword').addEventListener('input',bounce(requestWork,2000))
function bounce(fn,delay){
    let times = null;
    return ()=>{
        if(times){
        clearTimeout(times)
      }
    times = setTimeOut(fn,delay)
}

function requestWork(){
    log('请求服务器')
}

防抖函数参数说明：

1. fn为需要执行的业务函数，delay是多少秒后需要执行业务函数的时间。

节流：

概念：限制一个函数只能在一定时间内执行一次

document.querySelector('#keyword').addEventListener('input', throttle(requestWork, 2000))
        // 实现放流
        function throttle(fn,dely){
            let times = null
            return ()=>{
                if(!times){
                   times =  setTimeout(()=>{
                        fn()
                        times = null
                    },dely)
                }
            }
        }
        function requestWork() {
            console.log('发送请求');
        }

节流的应用场景

- 懒加载、滚动加载、加载更多或监听滚动条位置；

- 百度搜索框、搜索联想功能；

- 防止高频点击提交，防止表单重复提交；

防抖与节流的区别：
防抖是在业务函数在一定时间内触发，只有最后一次才被触发，这段时间内函数多次触发则会清除上一次业务函数的事件，重新计算事件

节流是在一段时间内，业务函数只被触发一次。