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

Posted 温文艾尔

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了微信小程序:利用防抖技术防止重复输入,重复发送请求的实现相关的知识,希望对你有一定的参考价值。

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

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

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

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

二、使用步骤

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

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


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

以上是关于微信小程序:利用防抖技术防止重复输入,重复发送请求的实现的主要内容,如果未能解决你的问题,请参考以下文章

微信小程序之使用函数防抖与函数节流

微信小程序使用函数防抖与函数节流

防止重复发送ajax请求

函数防抖VS函数节流

Js中防抖和节流的区别,论如何避免重复点击

利用Redis实现防止接口重复提交功能