uniapp之防抖

步步生花@苏殿主

已于 2023-12-07 15:11:15 修改

阅读量1.1k

点赞数

分类专栏： uniapp学习及经验文章标签： vue.js javascript 前端

于 2022-07-06 14:54:02 首次发布

本文链接：https://blog.youkuaiyun.com/sjp991012/article/details/125639563

版权

uniapp学习及经验专栏收录该内容

6 篇文章

订阅专栏

博客介绍一定时间内点击提交按钮多次仅触发一次的实现，提及需在文件夹下新建文件并给出页面使用说明，还指出防抖用箭头函数存在拿不到的问题但原因不明。

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

一定时间点击提交按钮多次只触发一次

在utils文件夹下新建debounce.js文件，内容如下：

export const Debounce = (fn, wait) => {
    let delay = wait|| 500
    let timer
    return function () {
        let args = arguments;
        if (timer) {
            clearTimeout(timer)
        }
       
        let callNow = !timer
        timer = setTimeout(() => {
            timer = null
        }, delay)
        if (callNow) fn.apply(this, args)
    }
}

页面中使用

注意：防抖时使用箭头函数Debounce((e) =>{},1000)时拿不到this，原因不明。

<template>
	<button class="submit_btn" @tap="submitFeedback">提 交</button>
</template>
<script>
	import {Debounce} from '@/utils/debounce.js'
	export default {
		data() {
			return {}
		},	
		methods: {
			//提交
			submitFeedback:Debounce(function(e) {
				let _this = this;
				this.$api.submitQuestion({
					emphasisNameId: this.emphasisName.id,
					syncId: uni.getStorageSync('sync_id')
				}, res => {
					if (res.code == 0) {
						this.isComplete = true;
						_this.openMpopup('success', '提交成功', 1500);
					} else {
						_this.openMpopup('err', res.msg, 1500);
					}
				})

			},1000)
		}
	}
</script>