前端优化——节流函数

节流函数

在短时间多次触发某个函数的场景下，对执行函数进行节流，节省无效浪费

1. 使用场景

• 如上图场景下，每当改变搜索框内的内容时，都会实时进行Ajax请求，并把响应数据渲染到页面，，用户为输入想要搜索的内容可能需要多次输入，每次都去请求会造成一些不必要的浪费
• 所以应在源头写一个节流函数，当在预定的时间内多次改变搜索框内容时，只对最后一次输入的结果进行请求

export function debounce(fun, delay){
  let timer //定时器
  
  return function (...args){
    if (timer) {
      clearTimeout(timer)
    }
    timer = setTimerout(() => { // 
      fun.apply(this, args)
    }, delay)
  }
}

注：代码来源vue-music音乐播放器项目

2. 函数调用

this.$watch(
  "query",
  debounce(newQuery => {
    // 不超过200ms函数节流
    this.$emit("query", newQuery);
  }, 200)
);

• 函数通过vue的 $watch 的实例方法调用，监听input框的内容变化，执行this.$emit("query", newQuery);前给函数加个节流函数
• 设置200ms时间中input内容不再变化再去请求数据

3. 误区

• 在看到这样写时，没明白debounce中的闭包函数是怎么执行的，因为只是返回一个函数没看到执行，，其实watch监听时后面应该写个匿名函数，当监听变化时自动执行这个匿名函数，
  其实在debounce(newQuery,200)函数写入时就已经执行这个函数，并把返回return的闭包函数等待执行
• (...args)表示当前函数执行传的所有参数，放到watch的执行环境就代表new，old监听变化的新旧两个参数值，就是定时器中执行的那个箭头函数的newQuery参数

博客原文地址
项目地址：vue-music音乐播放器项目