函数防抖与节流

前言

在前端开发过程中经常会绑定一些频繁触发的事件，比如搜索框输入，onmousemove,窗口大小变化等，当过于频繁的触发事件时，无疑会产生一些性能问题。更严重的可能导致程序崩溃。而函数防抖与函数节流则是解决这种问题的解决方案。

防抖

• 定义

对一个事件进行延迟触发。如果在延迟期间又触发了事件，延迟时间将重新计算。适用于输入框的输入触发。

• 实现

    function debounce(fun,time,...arg){
          let timer=null;
          return function(){
            clearTimeout(timer)
            setTimeout(() => {
              fun.call(this,...arg)
            }, time);
          }
        }
        function fun(a,b){
          console.log('触发事件')
          console.log(a)
          console.log(b)
        }
        window.onload=function(){
          document.getElementById('div').addEventListener('click',debounce(fun,1000,1,2))
        }

只有当触发事件后一秒内无再次触发操作，函数才会执行。

节流

• 定义

在一段时间频繁触发的事件,变为n秒触发一次,降低了触发频次。

• 实现

    function throttle(fun,interval,...arg){
          let start=0
          return function(){
            let now=Date.now()
            if(now-start>interval){
              fun.call(this,...arg)
              start=now
            }
          }
        }
        function fun(a,b){
          console.log('触发事件')
          console.log(a)
          console.log(b)
        }
        window.onload=function(){
          document.getElementById('div').addEventListener('click',throttle(fun,1000,1,2))
        }

无论多快的触发事件，都会变成一秒触发一次。

window.requsetAnimationFrame()

• 定义

官方解释：

也就是说此方法会用浏览器的最佳渲染频次进行方法调用。适用于动画绘制（从名字上也能看的出来）。 触发时间间隔 1000ms/60,约等于16.6ms每次。

使用：

window.requestAnimationFrame(()=>{
    console.log('我是一个16.6ms触发一次的节流函数')
}))