在 Uniapp 中实现输入框防抖功能,可以有效减少频繁触发接口请求的问题。以下是完整实现方案:
1. 防抖原理
当用户连续输入时,设置一个延迟计时器。若在指定时间内有新输入,则重置计时器;若超时无新输入,再执行接口请求。数学表示为: $$ f(x) = \begin{cases} \text{重置计时器} & \Delta t < \delta \ \text{执行请求} & \Delta t \geq \delta \end{cases} $$ 其中 $\delta$ 为延迟阈值(单位:毫秒)。
2. 实现代码
<template>
<view>
<input
v-model="inputValue"
@input="handleInput"
placeholder="请输入内容"
/>
</view>
</template>
<script>
export default {
data() {
return {
inputValue: '',
timer: null, // 防抖计时器
debounceTime: 500 // 防抖延迟时间(ms)
}
},
methods: {
// 输入事件处理
handleInput() {
clearTimeout(this.timer) // 清除已有计时器
// 设置新计时器
this.timer = setTimeout(() => {
this.requestAPI() // 执行实际请求
}, this.debounceTime)
},
// 实际请求方法
requestAPI() {
uni.request({
url: 'ht

最低0.47元/天 解锁文章
1246

被折叠的 条评论
为什么被折叠?



