函数节流-防抖函数

太过爱你忘了你带给我的痛 2021-12-20 08:55 299阅读 0赞

**函数节流**

一个函数执行一次后，只有大于设定的执行周期才会执行第二次，防止高频率的多次执行

情景：

监听页面滚动时，输出‘我滚动了’，处于优化性能考虑，不希望每次事件触发时就输出，而是在触发的情况下每隔200ms执行一次。

1 /* 
     2     节流函数
     3     @param fn 要被节流的函数
     4     @param delay 规定的间隔时间
     5     */
     6 function throttle(fn, delay) {
     7     var lasttime = 0; //上次执行的时间
     8     return function () { //此处用闭包，就是为了记录lasttime，lasttime不会马上被销毁，也不会重新被声明赋值
     9         var nowtime = Date.now();//本次执行的时间
    10         if (nowtime - lasttime > delay) { //本次减上次时间大于delay时执行fn
    11             fn.call(this); //修正this指向问题
    12             lasttime = nowtime; //执行完fn后，重新赋值lasttime
    13         }
    14     }
    15 }
    16 // onscroll右边的值必须是个函数，刚好throttle()调用后的返回值是return后的函数
    17 window.onscroll = throttle(function () {
    18     console.log('我滚动了')
    19 }, 200);

**防抖函数**

一个需要频繁处罚的函数，在规定的时间内，只让最后一次生效，前面的不生效。

情景：

重复点击某个按钮，最快的二次点击为300ms

1 function debounce(fn, delay) {
     2     var timer = null;//记录上次的延时器
     3     return function () {  //此处用闭包，为了记录timer
     4         clearTimeout(timer); //清除上次的计时器
     5         timer = setTimeout(function () { //重新赋值本次得延迟点击
     6             fn.apply(this);  //执行fn,修正this指向问题
     7         }, delay);  
     8     }
     9 }
    10 
    11 // onclick右边的值必须是个函数，刚好throttle()调用后的返回值是return后的函数
    12 document.querySelector('#button').onclick = throttle(function(){
    13     console.log('我点击了')
    14 },1000);

**总结**

节流函数就是执行第一次，指定时间后才会执行第二次

防抖函数就是在指定时间内，只执行最后一次，缺点就是会被延迟执行

点击按钮发起请求时，特别要注意，防止用户重复点击。

具体用哪个好，视情况而定吧。

转载于:https://www.cnblogs.com/xiaoyue-/p/10654848.html