节流和防抖

1.防抖

1.1定义：一定时间内事件触发多次时只执行一次，等用户的高频操作完了以后再触发事件

1.2场景

1.  例如网页中的搜索框，检索用户输入的时候，如果用户每执行输入操作就触发事件执行检索操作的话，会造成不必要的性能浪费，防抖就是解决这类问题，在用户完成触发某事件一定时间后再执行操作。

2. 网页窗口resize不断发生改变时，使用防抖可以让高频操作变成只触发一次。

1.3原理

1.4代码

//传一个函数fn和时间(ms)，用户在触发完事件time后再执行fn里的操作
function debounce(fn, time){
    let timer
    return function(){
        clearTimeout(timer)//再次触发操作要先清除先前开启的定时器
        timer = setTimeout(function(){
        fn()
        },time)
    }
}

2.节流

2.1定义：在指定时间内，高频操作只会执行一次，从触发事件开始，到规定时间结束，才能再触发事件

2.2场景

防抖存在一个问题，事件会一直等到用户完成操作后一段时间再操作，如果一直操作，会一直不触发。比如一个按钮，点击后就会发送请求，防抖中如果一直点击就不会被触发；此时就要用到节流，用户点击后立即触发发送请求事件，但是在指定时间内不会再次执行操作。

2.3原理

2.4代码 

//传一个操作函数fn和时间(ms)，用户在触发事件后立即执行操作，time时间内的触发无效
function throTtle(fn, t) {
    let timer = null
    return function () {
        if (!timer) {
            timer = setTimeout(function () {
                fn()
                //执行完操作后再给定时器赋值为null
                timer = null
            }, t)
        }
    }
}