微信小程序:利用防抖技术防止重复输入,重复发送请求的实现

459 阅读1分钟

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档

文章目录

一、页面中需要用到防抖的情景

微信小程序中,当我们为输入框设置bindinput事件,希望我们的每次输入都可以在页面中及时响应而不需要点击确定时,我们每次输入的字符都会发送一次请求
如图
在这里插入图片描述

而我们的本意是只允许在输入huawei完毕时发送一次请求即可,那么其余请求便是无效的,为了解决此类bug,防抖诞生了
防抖一般用于防止重复输入,重复发送请求
我们可以通过设置定时器来完成防抖

二、使用步骤

1.data同级设置TimeId,TimeId的值任意

在这里插入图片描述

2.发送请求之前清除定时器(第一次发送请求时不触发),将请求放置在定时器中

在这里插入图片描述
这样当我们每次输入字符,他都会等待0.3s,如果0.3s内仍在输入字符,则时间重置,直到0.3秒内不再输入字符再发送请求,这样可以避免请求的重复发送问题
在这里插入图片描述