vue函数节流与函数防抖

概念

• 函数节流:频繁触发,但只在特定的时间内才执行一次代码
• 函数防抖:频繁触发,但只在特定的时间内没有触发执行条件才执行一次代码

两者的区别在于函数节流是固定时间做某一件事,比如每隔 1s 发一次请求。而函数防抖实在频繁触发后,只执行一次(两者的前提都是频繁触发)

比如在触发滑动条件下，当触及滑动条底部时需要再一次触发分页请求加载数据,如果我们用 window.onscroll 监听事件时会导致不断频繁发送相同请求消耗资源,又比如监听执行的是 Dom 操作，频繁操作会影响浏览器性能甚至会导致浏览器卡崩。这时我们就需要采用 函数节流来按一定间隔时间触发监听,规定他多少秒执行一次。

函数节流 常用于onrize,onscroll等频繁触发的函数。

//监听时间每500ms执行一次
let type = false
window.onscroll = function () {
  if (type === true) return
  type = true
  setTimeout(() => {
    console.log('要执行的事')
    type = false
  }, 500)
}

这里可以直接采用的定时器代码模板:

  //公用定时器 , 用于函数节流，防止多次触发监听
  throttle(fn, delay) {
      let timer = null
      let firstTime = true
      console.log('!!1')
      return function(...args) {
        if (firstTime) {
          // 第一次加载
          fn.apply(this, args)
          return (firstTime = false)
        }
        if (timer) {
          // 定时器正在执行中，跳过
          return
        }
        timer = setTimeout(() => {
          clearTimeout(timer)
          timer = null
          fn.apply(this, args)
        }, delay)
      }
    }

使用方法为

window.onscroll = this.throttle(() => {
  //执行函数
}, 2000) //滑动则触发事件,2000毫秒响应一次

函数防抖

函数防抖的应用场景: 输入框搜索自动补全事件,频繁操作点赞和取消点赞等等，这些场景也可以通过函数节流来实现,但是相对于函数防抖来说过于复杂
实例场景:频繁操作点赞和取消点赞,因此需要获取最后一次操作结果并发送给服务器

let timer = null;
function click(){
    clearTimeout(timer);
    timer = setTimeout(()=>{
        ajax(...)
    },500)
}

实现原理: 如果在 500ms 内频繁操作点赞或者取消点赞,则每次都会清除一次定时器然后重新创建一个,直到最后一次操作点赞或者取消点赞,然后等待 500ms 后发送 ajax

使用函数节流结合函数防抖的方法

如果想要每隔一段时间发送一次请求,而不是等到用户触发最后一次操作才发送请求,代码如下:

var startTime = null;
var timer = null;
function click(){
    let curTime = new Date();
    startTime = startTime == null?curTime:startTime;
    if((curTime - startTime)>1000){
        // 固定上一次操作离这一次操作间隔>1000ms，则发送一次。
        //这里常用于阶段性频繁操作
        startTime = curTime; // 为下一次函数触发做准备
        ajax(...);
    }else{
        // 否则则执行函数防抖
        clearTimeout(timer);
        timer = setTimeout(()=>{
                    ajax(xxx);
                },500);
    }
}

最后

十分感谢原博主,原博客地址如下:
https://blog.csdn.net/qq_40421277/article/details/87990882