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

一、节流和防抖的定义

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

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

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

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

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

以节流为例(防抖功能类似):

1、节流函数 throttle 封装

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

javascript 复制代码
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

javascript 复制代码
在这里插入代码片
import { throttle } from '@/utils/utils.js'

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

注意:

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

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

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

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

相关推荐
南方者2 分钟前
文心文心,其利锻心!这个古风射覆,它帅到我了!文心快码 3.5S
前端·敏捷开发·文心快码
永日456703 分钟前
学习日记-CSS-day53-9.11
前端·css·学习
云枫晖4 分钟前
JS核心知识-this的指向
前端·javascript
magnet6 分钟前
用img标签渲染的svg VS 直接使用svg标签,有什么区别?
前端·html
ze_juejin8 分钟前
createComponent的environmentInjector详解
前端
云舟吖9 分钟前
基于 electron-vite 从零到一搭建桌面端应用
前端·架构
ze_juejin9 分钟前
CSS backdrop-filter 属性详解
前端
前端人类学11 分钟前
现代贪吃蛇游戏的进化:从经典玩法到多人在线体验
javascript·css
不爱编程的小方11 分钟前
响应式布局
前端·css3