vue/uniapp中防抖节流封装及其用法

最新推荐文章于 2024-06-17 15:39:12 发布

行走的毛毛虫

最新推荐文章于 2024-06-17 15:39:12 发布

阅读量914

点赞数 6

文章标签： vue.js uni-app 前端

本文链接：https://blog.csdn.net/wei80231996/article/details/136254929

版权

本文介绍了如何使用JavaScript创建antivibthrot.js文件，分别实现节流和防抖功能，以优化用户界面响应，防止短时间内连续触发操作。通过引入这两个函数，可以控制特定事件在一定延迟后执行。

摘要由CSDN通过智能技术生成

1.新建antivibthrot.js文件

// 节流:触发函数事件后，短时间间隔内无法连续调用，只有上一次函数执行后，过了规定的时间间隔，才能进行下一次的函数调用。
let lastCall = 0
export function throttle(fn, delay) {
	const now = new Date().getTime();
	if (now - lastCall < delay) {
		return
	}
	lastCall = now
	fn.apply(this, arguments)
}
// 防抖
let timer
export function debounce(fn, delay) {
	clearTimeout(timer)
	timer = setTimeout(() => {
		fn();
	}, delay);
}

2.应用

//在当前页面引入
import {throttle,debounce} from "@/*/antivibthrot.js"
click(){
  throttle(() => {
					//需要防抖执行的逻辑
					
				}, 1000)
  debounce(() => {
					//需要节流执行的逻辑
					
				}, 1000)

}