一线大厂常用的六大vue自定义指令合集之节流v-throttle

前言

截至目前，一线大厂常用的6大vue自定义指令中，我们已经学习实现了3个了，而其中上一篇
一线大厂常用的六大vue自定义指令合集之防抖v-debounce中的自定义防抖指令与我们今天要学习的节流自定义指令除了函数不一样，其它的基本上是一模一样。下面让我们一起来揭开它的面纱吧！
关于javascript中是如何实现节流，这里不再过多赘述，感兴趣的小伙伴可以查看这篇web前端高级JavaScript - 函数的防抖和节流文章了解更多。本篇文章主要介绍如何实现一个节流的自定义指令，下面我们就来分析一下大体实现思路。

思路分析

• 节流函数一般会接收2个参数：一个是节流函数中要执行的具体函数func，另一个则是节流等待的时间wait。
  同样需要传递多个参数给指令函数时，我们可以组装一个对象一起传递
• wait参数仍然可以以冒号的形式进行传递
• 对于指令函数体内接收到的参数进行判断处理：如果是函数直接传给节流函数，如果是对象则需对对象进行解析拆分。
• 另外还是为了让我们的自定义指令更灵活更通用，我们仍然需要在指令函数中再额外接收一个type和一个params参数，分别用来标识是什么类型的节流和节流函数所需的参数
  • 最后就是除了函数以外的其它参数均需设置默认值。
• 最后让我们把节流的完整代码来实现一下

v-th节流rottle自定义指令代码

function throttle(func, wait){
   
	let timer = null,
		previous = 0;
	return function anonmouse(...params){
   
		let now = new Date(),
			remaining = wait - (now - previous