uniapp 小程序防止重复点击搜索等

为什么处理重复点击

网页点击提交记录、订单等情形，接口也未做防重复会写入数据库会写入多条问题；一般需要加入防抖的点击，只保留最后一次。
输入框自动匹配搜搜123456，但是输入12345678又删除，正常是不可能搜输几个字发送几条记录只会检测最后输入的间隔大于多少ms才行动
抢购行为，每点击一次发送请求不合理且浪费性能，正常会数据库挂掉。

一 lodash类似防抖处理

防抖代码很多用到lodash，则lodash介绍为主

import debounce from 'lodash/debounce'
...
methods:{
   // 300ms 演示
   clickDebouce: debounce(function() {
     console.log('请求'）
    }, 300),
    
}
 

这里只是针对按钮，如点击n次例100次，只有最后一次才打印请求。
正常的点击一次松开，继续点击时会正常发送；即拦截的只是疯狂点击。
搜索、提交记录这种用户多次点击后，后续不会又来一遍疯狂点击的可以用这种。
至于抢购行为，用户疯狂点击或点一次松一次，减少了疯狂点击不够，还得限制单位时间内发起的请求，设置个flag，只有接口响应后打开，不管点击多少次节流阀flag未开，永不请求接口。

二 详情状态更新

详情有时例如send发送状态修改后，会fetchData刷新一次。
如果按钮的状态从fetchData中拿，此时存在一个长时间间隔，响应过慢实际已成功但按钮匹配不上，会造成继续点击一次浪费。可以修改为响应时直接带回新的按钮状态和局部要更新数据，取消原本要重复的请求数据。