Vue自定义指令实现防抖和节流；vue实现防抖或节流

最新推荐文章于 2024-05-08 23:35:15 发布

SecondEddie

最新推荐文章于 2024-05-08 23:35:15 发布

阅读量1.7k

点赞数 3

分类专栏： vue心得专栏文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_43286206/article/details/126952833

版权

防抖和节流

前端在调动接口时，常常要控制接口的请求频率，这时我们就可以使用防抖和节流两种方式来控制。

什么是防抖和节流，两者的区别是什么

防抖： 防抖就是在行为触发执行一次后，需静默等待N秒后才能再次执行，在此期间不能再触发行为，如果重复触发就计时归零后再次计时，直到用户静默到设定的阈值才再次执行。简而言之就是触发后N秒内不许触发，直到N秒后才可以执行。
节流： 节流就是N秒内只执行一次，不管在N秒内重复调用了多少次，也只执行一次。

注：以下是在VUE中以自定义指令形式实现的防抖和节流，是笔者按照自己的想法来实现的，可优化。

1、首先创建防抖节流JS文件

import Vue from "vue"

// 防抖
Vue.directive('shake', {
   
  inserted(el, binding) {
   
    let {
   
      fn,
      event = "click",
      delay = 800
    } = binding.value;
    let timerA = null