防抖与节流，应用场景有很多，例如：禁止重复提交数据的场景、搜索框输入搜索条件，待输入停止后再开始搜索。

防抖

• 点击button按钮，设置定时器，在规定的时间内再次点击会重置定时器重新计时，在规定的时间没有再次点击才执行相关函数。
• 规定时间内最后一次点击有效。

节流

• 点击button按钮，执行相关函数。设置定时器，在规定的时间内连续点击均无效，定时器过后，可以再次点击。
• 规定时间内可点击一次（第一次点击有效）。

案例-防抖

Vue项目中使用自定义指令实现（按钮）防抖功能。

应用场景：搜索框输入搜索条件，待输入停止后再开始搜索。

/*
*  防抖，规定时间内最后一次点击有效。
*  @param {?Number|300} time - 间隔时间，毫秒
*  @param {Function} fn - 执行函数
*  @param {?String|"click"} event - 事件类型 例："click"
*  @param {Array} binding.value - [fn,event,time]
*  例：<el-button v-debounce="[resetData,`click`,300]">刷新</el-button>
*  也可简写成：<el-button v-debounce="[resetData]">刷新</el-button>
*/
// 注册一个全局自定义指令 `v-debounce`
Vue.directive('debounce', {
  // 当被绑定的元素插入到 DOM 中时……
  inserted: function (el, binding) {
    //binding.value，使用自定义指令v-debounce时填写的参数
    //解构赋值，定义了3个变量，将参数（数组）按顺序进行赋值
    let [fn, event = "click", time = 300] = binding.value
    let timer
    el.addEventListener(event, () => {
      //默认监听的事件为click
      //判断计时器是否存在，存在则清除计时器。重新创建计时器，到时间后执行函数fn
      if(timer){
        clearTimeout(timer)
      }
      timer = setTimeout(() => fn(), time)
    })
  }
})

案例-节流

Vue项目中使用自定义指令实现（按钮）节流功能。

应用场景：click事件，禁止重复提交数据的场景。

/*
*  节流，规定时间内可点击一次（第一次点击有效）。
*  @param {?Number|300} time - 间隔时间，毫秒
*  @param {Function} fn - 执行函数
*  @param {?String|"click"} event - 事件类型 例："click"
*  @param {Array} binding.value - [fn,event,time]
*  例：<el-button v-throttle="[resetData,`click`,300]">刷新</el-button>
*  传递参数则：<el-button v-throttle="[()=>resetData(param),`click`,300]">刷新</el-button>
*/
// 注册一个全局自定义指令 `v-throttle`
Vue.directive('throttle', {
  // 当被绑定的元素插入到 DOM 中时……
  inserted: function(el, binding) {
    //binding.value，使用自定义指令v-throttle时填写的参数
    //解构赋值，定义了3个变量，将参数（数组）按顺序进行赋值
    let [fn, event = "click", time = 300] = binding.value
    let timer = null;
    el.addEventListener(event, () => {
      //默认监听的事件为click
      //判断计时器是否存在，不存在则执行函数fn，创建计时器
      if (timer == null) {
        fn();
        timer = setTimeout(() => timer = null, time)
      }
    })
  }
})


//方案二
/**
 * 按钮节流
 * 3秒内只有第一次点击有效，防止重复提交数据。
 */
//注册一个全局自定义指令 `v-throttle-disabled`
Vue.directive('throttle-disabled', {
	// 当被绑定的元素插入到 DOM 中时……
	inserted(el, binding) {
		let [event = "click", time = 2 * 1000] = binding.value
		el.addEventListener(event, () => {
			//默认监听click事件
			//当 dom元素el 非禁用状态时 将其设置为禁用状态，同时设置计时器，规定时间后（默认2秒）启用。
			if (!el.disabled) {
				el.disabled = true
				setTimeout(() => {
					el.disabled = false
				}, time)
			}
		})
	}
})

组件中使用

在.vue文件中，data、methods同级的位置，添加如下配置：

,
directives: {
	debounce: {//自定义指令名，v-debounce
		// 指令的定义
    inserted: function(el, binding) {
      //binding.value，使用自定义指令v-throttle时填写的参数
      //解构赋值，定义了3个变量，将参数（数组）按顺序进行赋值
      let [fn, event = "click", time = 300] = binding.value
      let timer = null;
      el.addEventListener(event, () => {
        //默认监听的事件为click
        //判断计时器是否存在，不存在则执行函数fn，创建计时器
        if (timer == null) {
          fn();
          timer = setTimeout(() => timer = null, time)
        }
      })
    }
	}
},

全局引入

新建js文件

在项目中新建 myDirective.js 文件。通过export default暴露出来。

/*
 * @Author: qsdbl
 * @Date: 2022-02-10
 * @Description: 添加全局自定义指令。
 * 防抖，v-debounce。节流，v-throttle、v-throttle-disabled（可能无效）。
 * 示例：<el-button v-throttle="[resetData]">刷新</el-button>，使用默认配置，监听click事件，300毫秒内只会执行一次函数resetData
 * 传递参数：<el-button v-throttle="[()=>resetData(param)]">刷新</el-button>
 */
export default {
	install(Vue, Options) {
		/*
		 *  防抖，规定时间内（默认300毫秒）最后一次点击有效。
		 *  @param {?Number|300} time - 间隔时间，毫秒
		 *  @param {Function} fn - 执行函数
		 *  @param {?String|"click"} event - 事件类型 例："click"
		 *  @param {Array} binding.value - [fn,event,time]
		 *  例：<el-button v-debounce="[resetData,`click`,300]">刷新</el-button>
		 *  也可简写成：<el-button v-debounce="[resetData]">刷新</el-button>
		 */
		// 注册一个全局自定义指令 `v-debounce`
		Vue.directive('debounce', {
			// 当被绑定的元素插入到 DOM 中时……
			inserted: function(el, binding) {
				//binding.value，使用自定义指令v-debounce时填写的参数
				//解构赋值，定义了3个变量，将参数（数组）按顺序进行赋值
				let [fn, event = "click", time = 300] = binding.value
				let timer
				el.addEventListener(event, () => {
					//默认监听的事件为click
					//判断计时器是否存在，存在则清除计时器。重新创建计时器，到时间后执行函数fn
					if (timer) {
						clearTimeout(timer)
					}
					timer = setTimeout(() => fn(), time)
				})
			}
		})

		/*
		 *  节流，规定时间内可点击一次（第一次点击有效）。
		 *  @param {?Number|300} time - 间隔时间，毫秒
		 *  @param {Function} fn - 执行函数
		 *  @param {?String|"click"} event - 事件类型 例："click"
		 *  @param {Array} binding.value - [fn,event,time]
		 *  例：<el-button v-throttle="[resetData,`click`,300]">刷新</el-button>
		 *  传递参数则：<el-button v-throttle="[()=>resetData(param),`click`,300]">刷新</el-button>
		 */
		// 注册一个全局自定义指令 `v-throttle`
		Vue.directive('throttle', {
			// 当被绑定的元素插入到 DOM 中时……
			inserted: function(el, binding) {
				//binding.value，使用自定义指令v-throttle时填写的参数
				//解构赋值，定义了3个变量，将参数（数组）按顺序进行赋值
				let [fn, event = "click", time = 300] = binding.value
				let timer = null;
				el.addEventListener(event, () => {
					//默认监听的事件为click
					//判断计时器是否存在，不存在则执行函数fn，创建计时器
					if (timer == null) {
						fn();
						timer = setTimeout(() => timer = null, time)
					}
				})
			}
		})

		/*
		 *  节流方案二，通过禁用html标签，规定时间内可点击一次（第一次点击有效）。
		 *  应用在封装的组件中可能无效。
		 *  @param {?String|"click"} event - 事件类型 例："click"
		 *  @param {?Number|2000} time - 间隔时间，毫秒
		 *  @param {Array} binding.value - [event,time]
		 *  例：<button v-throttle-disabled="[]">测试按钮</button>
		 */
		//注册一个全局自定义指令 `v-throttle-disabled`
		Vue.directive('throttle-disabled', {
			// 当被绑定的元素插入到 DOM 中时……
			inserted(el, binding) {
				let [event = "click", time = 2 * 1000] = binding.value
				el.addEventListener(event, () => {
					//默认监听click事件
					//当 dom元素el 非禁用状态时 将其设置为禁用状态，同时设置计时器，规定时间后（默认2秒）启用。
					if (!el.disabled) {
						el.disabled = true
						setTimeout(() => {
							el.disabled = false
						}, time)
					}
				})
			}
		})
	}
}

配置main.js文件

在入口文件main.js引入

//引入自定义指令，方便全局使用
import myDirective from '@/static/js/myDirective.js';
Vue.use(myDirective);

使用

这样就可以全局使用myDirective.js里面的自定义指令了，示例：

<button v-debounce="[debounceTest,`click`,3000]">测试按钮-3秒</button>
<button v-debounce="[()=>debounceTest('hi')]">测试按钮</button>

笔记学习自：51CTO-JackieDYH、vue 全局、局部引入