vue项目中使用节流throttle 和 防抖debounce

一、节流和防抖的定义

节流：频繁输入、频繁操作的时候，保持一定频率连续触发，比如 scroll 事件、click 事件。

防抖：频繁输入、频繁操作的时候，在最后才触发事件处理函数，比如 input 输入事件。

关于节流和防抖的更多细节，本篇文章不做重点介绍，想了解可以阅读 《防抖debounce和节流throttle》

二、在 vue项目 中使用防抖和节流

在 vue 项目中，想要给 methods 中的某个方法 fn 增加节流或防抖，应该如何实现？

以节流为例（防抖功能类似）：

1、节流函数 throttle 封装

公共类 utils.js 中封装节流函数 throttle，方便全局调用

export const throttle = (fn, delay = 100) => {
    
    
	let timer = null
	return function () {
    
    
		if (timer) return
		timer = setTimeout(() => {
    
    
			fn.apply(this, arguments)
			timer = null
		}, delay)
	}
}

2、引入并使用节流函数 throttle

在需要的页面引入节流函数，使用节流函数包裹要进行节流的方法 fn

import {
    
     throttle } from '@/utils/utils.js'

methods: {
    
    
	fn: throttle(function() {
    
    
		// 业务逻辑
	}, 200)
}

注意：

在vue中，methods中的方法不可以使用箭头函数，

因为箭头函数本身没有this，箭头函数的this会指向父级的this，

如果使用了箭头函数，fn中的this会指向父级的this（window），不再指向vue实例，

同理，使用节流函数throttle包裹的方法，也不能使用箭头函数。