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包裹的方法,也不能使用箭头函数。

相关推荐
coding随想3 分钟前
掌控网页的魔法之书:JavaScript DOM的奇幻之旅
开发语言·javascript·ecmascript
然我30 分钟前
不用 Redux 也能全局状态管理?看我用 useReducer+Context 搞个 Todo 应用
前端·javascript·react.js
前端小巷子35 分钟前
Web 实时通信:从短轮询到 WebSocket
前端·javascript·面试
神仙别闹39 分钟前
基于C#+SQL Server实现(Web)学生选课管理系统
前端·数据库·c#
web前端神器1 小时前
指定阿里镜像原理
前端
枷锁—sha1 小时前
【DVWA系列】——CSRF——Medium详细教程
android·服务器·前端·web安全·网络安全·csrf
枷锁—sha1 小时前
跨站请求伪造漏洞(CSRF)详解
运维·服务器·前端·web安全·网络安全·csrf
群联云防护小杜1 小时前
深度隐匿源IP:高防+群联AI云防护防绕过实战
运维·服务器·前端·网络·人工智能·网络协议·tcp/ip
DanB241 小时前
html复习
javascript·microsoft·html
汉得数字平台1 小时前
【鲲苍提效】全面洞察用户体验,助力打造高性能前端应用
前端·前端监控