RN笔记 - 禁止事件被连续快速点击

场景：开发过程中，我们有时需要对 function 或者 fetch 接口加保护，禁止事件被连续触发多次。

1、新建 handlerOnceTap.js

/* eslint-disable no-undef */
let isCalled = false;
let timer;

/**
 * 禁止连续快速点击
 *
 * @param functionTobeCalled method 对调函数体
 * @param interval  定时器
 */

export default (HandlerOnceTap = (functionTobeCalled, interval = 1000) => {
  if (!isCalled) {
    isCalled = true;
    clearTimeout(timer);
    timer = setTimeout(() => {
      isCalled = false;
    }, interval);
    return functionTobeCalled();
  }
});

2、触发时加保护，1s内只执行1次

import HandlerOnceTap from "./handlerOnceTap";

// 对 this.onReq() 加保护
HandlerOnceTap(() => this.onReq());

当然还有其他的解决方案，比如触发1次后立即对按钮置灰，通过控制 state 属性不允许再点击。等callback之后恢复按钮的可点击状态。