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

相关推荐
江城开朗的豌豆1 分钟前
Vue-router方法大全:让页面跳转随心所欲!
前端·javascript·vue.js
程序员爱钓鱼11 分钟前
Go语言泛型-泛型约束与实践
前端·后端·go
前端小巷子12 分钟前
web从输入网址到页面加载完成
前端·面试·浏览器
江城开朗的豌豆13 分钟前
Vue路由动态生成秘籍:让你的链接'活'起来!
前端·javascript·vue.js
晓得迷路了13 分钟前
栗子前端技术周刊第 88 期 - Apache ECharts 6.0 beta、Deno 2.4、Astro 5.11...
前端·javascript·echarts
江城开朗的豌豆19 分钟前
在写vue公用组件的时候,怎么提高可配置性
前端·javascript·vue.js
江城开朗的豌豆19 分钟前
Vue路由跳转的N种姿势,总有一种适合你!
前端·javascript·vue.js
江城开朗的豌豆20 分钟前
Vue路由玩法大揭秘:三种路由模式你Pick谁?
前端·javascript·vue.js
江城开朗的豌豆21 分钟前
Vue路由守卫全攻略:给页面访问装上'安检门'
前端·javascript·vue.js
小磊哥er27 分钟前
【前端工程化】前端组件模版构建那些事
前端