Vue.js——事件节流和防抖动的应用

前言

    学过JavaScript的一些高级应用的同学，想必不会对JavaScript中的事件节流和防抖动陌生。我想应该都能随手甩出一段JavaScript代码实现节流和防抖动。但是，在实际开发中，写原生的JavaScript代码肯定是不会适应开发需求的。接下来，我们以Vue.js中如何很方便地使用事件节流和防抖动为例，在实际开发中运用一下~

事件节流(throttle)

    事件节流则是指让事件在指定的一段时间内触发，且每次触发事件都会在这段时间的起始时间点开始执行，之后在这段时间内不会触发该事件。那么如何在Vue中方便的使用事件节流？
    1. 定义事件节流函数

	// 事件节流
	export function throttle(fn, time) {
		let timer = null, context = this // 用于存储计时器


		return function () {
			if (!timer) { // 如果此时不存在计时器
				let arg = arguments
				fn.apply(context, arg) // 调用事件

				timer = setTimeout(() => { // 开启计时器
					// timer秒后
					// 清除计时器
					clearTimeout(timer)
					timer = null
				}, time)
			}
		}
	}

    2. 全局注册指令

	Vue.directive('throttle', {
		bind(el, binding) {
			let executeFunction

			if (binding.value instanceof Array) {
				const [func, timer] = binding.value;
				executeFunction = throttle(func, timer);
			} else {
				console.error(`throttle指令绑定的参数必须是数组，且需执行的事件类型或函数或时间间隔不能为空`)
				return
			}
			el.addEventListener('click', executeFunction);
		}
	})

    3. main.js中引入

	import './directives'

    4. 页面中使用

	<template>
	  <div>
		<button v-throttle="[() => { callBack('wjc') }, 3000]">click  me! throttle</button>
	  </div>
	</template>

	<script>
		export default {
		  name: 'HelloWorld',
		  props: {
			msg: String
		  },
		  methods: {
			callBack(name) {
			  console.log(`my name is ${name}`)
			}
		  }
		}
	</script>

事件防抖动(debounce)

    事件防抖动也是在指定的一段时间内触发，不同于事件节流的是它在这段时间结束时触发，在这个时间点结束之前该事件不会触发。
    事件抖动函数定义

	// 事件防抖动
	export function debounce(fn, delay) {
		let timer = null, context = this

		return function() {
			if (!timer) {
				let arg = arguments

				timer = setTimeout(() => {
				  fn.apply(context, arg)
				  clearTimeout(timer)
				  timer = null;
				}, delay)
			}
		};
	}

PS：指令注册使用方式同上。