王文健的博客笔记


请多指教

前端性能优化——节流函数

节流函数

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

1. 使用场景

函数节流.png

  • 如上图场景下,每当改变搜索框内的内容时,都会实时进行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内容不再变化再去请求数据
  • 这样当输入框连续快速变化多次时,只有最后一次才发送请求
    节流函数效果.png

3. 误区

  • 在看到这样写时,没明白debounce中的闭包函数是怎么执行的,因为只是返回一个函数没看到执行,,其实watch监听时后面应该写个匿名函数,当监听变化时自动执行这个匿名函数,
    其实在debounce(newQuery, 200)函数写入时就已经执行这个函数,并把返回return的闭包函数等待执行
  • (...args)表示当前函数执行传的所有参数,放到watch的执行环境就代表new,old监听变化的新旧两个参数值,就是定时器中执行的那个箭头函数的newQuery参数
未经允许不得转载:王文健的博客笔记 » 前端性能优化——节流函数

评论 2

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. [...]博客原文地址 项目地址:vue-music音乐播放器项目[...]

    前端优化——节流函数 R11; 1 (2018-11-19) 回复
  2. 兄弟这个应该是函数防抖,多次调用函数只执行最后一次是防抖,周期性执行是节流。而且 debounce的英文释义也是抖动的意思。我是个小菜鸡,刚掌握这个知识点。

    yike (2018-11-22) 回复
Copyright & copy; 2018 @王文健. All rights reserved.

小编留言

本网站是作者学习路上的一个见证,记录和敦促我的学习生活,也希望借此结交更多前辈好友。记录作者在学习生活的点点滴滴,愿与你一同进步,共勉!

Copyright & copy; 2018 @王文健. All rights reserved.

感谢 WordPress DUX 提供的参考模板与设计,阿里云提供的优质云服务,使我完成本网站的制作