函数节流和函数防抖

作者有话说

第一次在众多大佬的掘金上写一篇文章，以前端小白的身份谈谈我对函数防抖和节流的看法，听说字节面试题有这类问题，赶紧上号学一会，文章比较简单，不足之处求大佬指正。

函数防抖（debounce）

指触发事件后在规定时间内函数只能执行一次,如果在规定时间内又触发了事件,则会重新计算函数执行时间。通俗的说，当用户连续点击去请求某个事件时，用户一直在规定时间内连续触发该事件，将不执行此事件，用户超过该规定时间则执行该事件。

举个粒子

function debounce(fn, delay) {
    //fn是将要执行的函数，delay就是我们规定的那个时间限制
    let timer = null
    //timer为定时器，利用闭包来保存timer防止其被销毁
    return function () {
        let arg = arguments
    //调用这个函数一次就清除上一次的定时器
       clearTimeout(timer)
     //打开这次的定时器
       timer = setTimeout(() => {
            fn.apply(this.arg);
        }, delay);
    }
}

函数节流（throttle）

这个就比较好理解了，让触发时间在规定的时间内只触发一次，

直接上粒子

function throttle(fn,delay = 1000) {
    //fn是将要执行的函数，delay就是我们规定的那个时间限制
    let prev = null
    //定义一个闭包保证不在函数执行结束后销毁
    return function () { 
        let arg = arguments
        //定义一个现在的时间并得到它
        let now = Date.now()
       //如果时间间隔大于等于设置的时间（delay）的话
         if(now-prev >= delay) {
             fn.apply(this,args);
       //将现在的时间设置成上一次的执行时间
             prev = Date.now()
         }
    }
}

总结

• 函数防抖和函数节流都是为了避免服务器资源浪费而产生的，两者的目的都是防止某一时间频繁触发，但是他们的原理却大不相同。
• 函数防抖是某一段时间内只执行一次，而函数节流是间隔时间执行。