函数的防抖和节流

一、防抖

1、什么是函数的防抖

概念：函数防抖（debounce），就是指触发事件后，在 n 秒内函数只能执行一次，如果触发事件后在 n 秒内又触发了事件，则会重新计算函数延执行时间。

 2、为什么需要防抖

前端开发过程中，有一些事件，常见的例如，onresize，scroll，mousemove ,mousehover 等，会被频繁触发（短时间内多次触发），不做限制的话，有可能一秒之内执行几十次、几百次，如果在这些函数内部执行了其他函 数，尤其是执行了操作 DOM 的函数（浏览器操作 DOM 是很耗费性能的），那不仅会浪费计算机资源，还会降低 程序运行速度，甚至造成浏览器卡死、崩溃。

3、函数防抖的基本思路

使用setTimeout来延迟执行函数，当函数在倒计时结束前再次触发时，则清空setTimeout函数，重新计时，直到计时结束。

4、防抖的实现

<button id="btn"></button>

let timer=null
let btn=document.getElementById('btn')
btn.addEventListener('click',()=>{
  if (timer) {
    //事件重复点击时，防止计时器叠加，先清除再创建计时器
    clearTimeout(timer)
  }
     timer=setTimeout(()=>{
      console.log('触发事件！');
    },2000)
})

 二、节流

节流与防抖类似，在规定时间内只能触发一次函数。

思路是：获取触发函数的时间戳，若触发时间-上次触发时间>规定的时间，才能执行函数。

function fun(){
    console.log(1)
}
            
$('button').on('click',trottle(fun,2000))
            
function trottle(fn,delay){
    var begin = 0
    return function(){
        var cur = new Date().getTime()
        if(cur - begin > delay){
            fn()
            begin = cur
        }
    }
}

 此时创建的函数都只是最基本的功能实现，再具体使用中会遇见各种问题，想写出更加完善，完美实现功能的函数还需要持之以恒的学习。