封装防抖与节流函数

什么是防抖？

防抖

防抖是指在触发事件后，等待一段时间后执行函数。如果在等待时间内又触发了该事件，则重新计时。这样可以避免在短时间内多次触发同一事件导致函数被频繁执行。也就是多次触发以最后一次为准

常见的应用场景包括输入框输入时的搜索建议、窗口调整大小时的重新计算布局等。

        function debounce(fn,tm){//第一个参数是要进行防抖的代码,第二个参数是防抖时间单位毫秒
            let time//延时器变量
            return function(e){//如果不需要事件对象,可以不传参数
                if(time) clearTimeout(time)
                time=setTimeout((e)=>{fn(e)},tm)
            }
        }

怎么使用呢？

这是鼠标在div上滑动,让div里的数字自增的事件

        const div=document.querySelector("div")//获取div
        div.addEventListener("mousemove",debounce(mouse,500))//添加防抖事件
        function mouse(){div.innerHTML++}//触发事件要执行的代码

什么是节流？

节流

节流是指在一定时间间隔内最多执行一次函数。无论事件触发多频繁，只有在指定的时间间隔过去后才会执行函数。这样可以限制函数的执行频率，避免过多的计算和渲染。也就是多次触发,以指定的时间只能执行一次

常见的应用场景包括滚动事件的处理、鼠标移动事件的处理等。

     function throttle(fn,tm){
      let flag=true
      return function(){//如果需要事件对象,要传参数
        if(flag){
          flag=false
          fn()//如果需要事件对象,要传参数
          setTimeout(function(){flag=true},tm)//如果需要事件对象,要传参数
        }
      }
    }

使用方法与防抖一致

思路

防抖与节流都是运用了延时器

写防抖的逻辑是：事件触发后先声明一个变量用来存延时器,再判断有没有这个延时器,如果有就清除这个延时器,如果没有就创造一个延时器赋值给这个变量。这样当频繁触发事件时,就会一直清掉延时器,当不再触发事件后,延时器不再被清除,就会执行延时器里的代码

写节流的逻辑是:事件触发后先声明一个开关变量,事件触发后运行绑定事件的代码,随即把开关关掉,然后延时器里设定一个时间再开启开关。这样当频繁触发事件,不管触发多少次,延时器里面不把开关打开就不会执行事件处理代码