防抖函数简易版

最新推荐文章于 2025-04-22 11:45:10 发布

相伴而行

最新推荐文章于 2025-04-22 11:45:10 发布

阅读量164

点赞数

分类专栏： uniapp小程序知识点分享文章标签：微信小程序 vue.js

本文链接：https://blog.youkuaiyun.com/able_me/article/details/119036036

版权

uniapp小程序知识点分享专栏收录该内容

13 篇文章

订阅专栏

本文介绍了在前端开发中如何使用防抖(debounce)函数来优化用户体验，特别是在连续触发的场景下。通过示例代码展示了一个防抖函数的实现，该函数确保在最后一次触发后三秒才执行，用于避免频繁调用导致的性能问题。当用户连续点击时，只有最后一次点击会在三秒后执行指定的操作，如显示Toast提示。这种方法常用于输入验证、窗口resize事件或者滚动事件监听等场景，以提高应用性能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<view class="" @click="antiShake">连续触发三秒后再执行</view>

<script>
export default {
	data() {
		return {
		};
	},
	components: {

	},
	onLoad(option) {

	},
	onShow() {},
	methods: {
		// 防抖函数
		antiShake() {
			let that = this;
			let timer = null;
			if (timer) {
				clearTimeout(that.timer);
			}
			timer = setTimeout(() => {
				
				uni.showToast({
					title: '三秒后执行成功',
					duration: 2000
				});
				console.log("三秒后执行")
			}, 1000 * 3);
		}
	}
};
</script>