防抖和节流用在什么地方_防抖与节流简单_防抖和节流的区别

在监听频繁触发的事件时,一定要多加小心,比如 用户在输入框打字、窗口大小调整、滚动、 事件。

这些事件总是被频繁触发,可能 几秒一次。如果针对每次事件都发起 fetch 请求(或类似的行为),那显然是不明智的。

我们需要做的就是减缓事件处理程序的执行速度。这种缓冲技术就是 防抖() 和 节流() 。

在本文中,你会了解到如何在 Vue 组件中 使用 防抖 和 节流 控制 观察者() 和 事件处理程序。

1. 观察者 防抖

我们先从一个简单的组件开始,我们的任务是 将用户输入到 文本框中的文本 输出到控制台:


  
  

{{ value }}

export default { data() { return { value: "", }; }, watch: { value(newValue, oldValue) { console.log("Value changed: ", newValue); } } };

在 输入框 敲几个字符。每次输入时,值就会被 log 到控制台。

我们通过使用 观察者() 监听 value 数据属性 来实现了打印日志。但如果你想在 观察者的回调 中加入一个 使用 value 作为参数 的 GET 请求,那你应该不会期望太过频繁地发起请求。

我们来对 打印控制台日志 这个行为做一下 防抖。核心思想是创建一个 防抖函数,然后在 观察者 内部调用该函数。

我在这里选择了 '.' 的 防抖实现,但你可以自由选择喜欢的实现方式。

我们来将 防抖逻辑 应用到组件:


  
  

{{ value }}

import debounce from "lodash.debounce"; export default { data() { return { value: "", }; }, watch: { value(...args) { this.debouncedWatch(...args); }, }, created() { this.debouncedWatch = debounce((newValue, oldValue) => { console.log('New value:', newValue); }, 500); }, beforeUnmount() { this.debouncedWatch.cancel(); }, };

如果你打开这个 demo,你会发现其实从用户角度来看,变化不大:你依旧可以像上一个 demo 中一样自由输入字符。

但有一个区别:只有在最后一次输入的 500ms 之后,才会将新的输入值打印日志到控制台。这说明 防抖 在生效。

观察者 的 防抖实现 只需要 3 个简单步骤:

在 () 钩子 里,创建 防抖回调,并将其赋值到实例上:this. = (…, 500)。在 观察者 回调 watch.value() { … } 中 传入正确的参数 调用 this.()。最后,() 钩子中 调用 this..() ,在卸载组件之前,取消所有还在 的 防抖函数执行。

采用同样的方式,你可以对任意数据属性的 观察者 应用 防抖。然后就可以安全执行 防抖回调内部的一些比较重的操作,比如 网络请求、繁重的 DOM 操作,等等。

2. 事件处理器 防抖

上面一节,我展示了如何对 观察者 使用 防抖,那么常规的事件处理器呢?

我们重用之前用户输入数据到输入框的例子,但这一次会给输入框加个 事件处理器。

像往常一样,如果你没有采取任何缓冲的措施,每当值被修改时,会被打印到控制台:


  


export default {
  methods: {
    handler(event) {
      console.log('New value:', event.target.value);
    }
  }
};

打开这个 demo,在输入框打几个字符。看看控制台:你会发现每次你输入的时候就会有日志被打印出来。

同样,如果你会执行一些比较重的操作(比如网络请求),可就不合适了。

对 事件处理器 使用 防抖,可以参考下面这个:


  


import debounce from "lodash.debounce";
export default {
  created() {
    this.debouncedHandler = debounce(event => {
      console.log('New value:', event.target.value);
    }, 500);
  },
  beforeUnmount() {
    this.debouncedHandler.cancel();
  }
};

打开 demo,输入一些字符。组件只有在最后一次输入的 500ms 之后,才会将新的输入值打印日志到控制台。防抖 再一次生效了!

事件处理器 的 防抖实现 只需要 3 个步骤:

. 在 () 钩子 里,创建实例后,立刻将 防抖回调 (event => {…}, 500) 赋值到 this. 。在输入框的 中 给 v-on:input 赋上 :最后,在卸载组件之前, 在 () 钩子中 调用 this..() ,取消所有还在 的 函数调用。

另一方面,这些例子应用了 防抖 的技术。然而,同样的方式可以以用于创建 节流函数。

3. 注意

你可能不理解:为什么不直接在 组件的 选项中创建 防抖函数,然后在 中调用这些方法作为事件处理器?

// ...
  methods: {
    // Why not?
    debouncedHandler: debounce(function () { ... }}, 500)
  }
// ...

这比在实例对象上创建 防抖函数 要简单的多。

例如:


  


import debounce from "lodash.debounce";
export default {
  methods: {
    // Don't do this!
    debouncedHandler: debounce(function(event) {
      console.log('New value:', event.target.value);
    }, 500)
  }
};

这次不是在 () 钩子 里创建 防抖回调了,而是将 防抖回调 赋给了 . 。

你如果试过 demo,你会发现是有效果的!

问题是,组件使用 { … } 导出的 对象,包括方法,会被组件实例重用。

如果网页中有 2 个以上的组件实例,那么所有的组件都会应用 相同 的防抖函数 . — 这会导致防抖出现故障。

4. 总结

在 Vue 中,可以很轻松的对 观察者 和 事件处理器 应用 防抖 和 节流。

核心逻辑就是,在 () 钩子 里,创建 防抖 或 节流 的回调,并赋值在实例上。

// ...
  created() {
    this.debouncedCallback = debounce((...args) => {
      // The debounced callback
    }, 500);
  },
// ...

A)然后在观察者内部调用实例上的防抖函数:

// ...
  watch: {
    value(...args) {
      this.debouncedCallback(...args);
    },
  },
// ...

B)或在 中设定一个事件处理器:


  

在这之后,每次调用 this.(…args) ,就算执行频率非常高,内部的回调也能缓冲执行。

你对 Vue 中的 防抖 和 节流 还什么问题吗?欢迎提问!

———END———
限 时 特 惠: 本站每日持续更新海量各大内部创业教程,永久会员只需109元,全站资源免费下载 点击查看详情
站 长 微 信: nanadh666

声明:1、本内容转载于网络,版权归原作者所有!2、本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。3、本内容若侵犯到你的版权利益,请联系我们,会尽快给予删除处理!