节流与防抖

防抖

函数防抖（debounce），触发高频事件后 n 秒内函数只会执行一次，如果 n 秒内高频事件再次被触发，则重新计算时间。计时完成再执行

例如：百度搜索框的联想功能

代码实现

// 简单的例子 
function debounce(fn,wait){
    let timer = null;
    return function(){
        if(timer !== null){
            clearTimeout(timer);
        }
       timer = setTimeout(fn.bind(this,...arguments),wait);//参数的处理
    }
}

var test = debounce(()=>{
    console.log(1)
},1000)
test()
test()
test()//只输出了一次1

节流

限制一个函数在一定时间内只能执行一次。节流是将多次执行变成每隔一段时间执行，先执行，再计时

例如：淘宝的结算购物车的功能

function throttle(fn, delay) {
    let flag = true //用来记录一个函数在一定时间内是否被执行过
    return function () {
        if (!flag) {
            return false //如果是false说明有函数的计时已经开启
        }
        flag = false
        setTimeout(() => {
            fn.call(this,...arguments)//参数的处理
            flag = true //执行之后flag复位
        }, delay)
    }
}

let test = throttle(()=>{
    console.log(1)
},1000)
test()
test()
test()//只输出了一次1

区别

防抖动是将多次执行变为最后一次执行，节流是将多次执行变成每隔一段时间执行。