前端优化——撙节函数

2019年8月21日 185次阅读 来源: 小健

撙节函数

在短时间屡次触发某个函数的场景下，对实行函数举行撙节，节约无效糟蹋

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音乐播放器项目

    原文作者：小健
    原文地址: https://segmentfault.com/a/1190000015589447
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞