RN -频繁点击的几个情况及处理

防抖/节流

待完善!

1

当某个方法被多次频繁调用, 通过该方法进行拦截,
效果: 多次调用同一函数, 仅最后一次调用生效,其余调用均抛弃

var actionAwaitTimer = null; // 定时器
// 多次点击, 仅执行最后一次点击的事件
const actionAwait = (fn, wait = 100) => {
  return function (params) {
    if (!actionAwaitTimer) {
      actionAwaitTimer = setTimeout(() => {
        fn(params);
      }, wait);
    } else {
      clearTimeout(actionAwaitTimer);
      actionAwaitTimer = null;
      actionAwait(fn, wait)(params);
    }
  }
}

// 使用注意, 注意 this 的问题
// 使用时
this.actionAwait(myFunc)(params);

myFunc = (params)=>{
...} // 此处的函数必须使用箭头函数 , 确保里面的this 作用域正确~~

2

连续多次点击,需要做间隔时间判断时使用
效果: 多次点击或者在某个方法中, 频繁出发, 可以通过时间间隔来阻断该时间间隔中的调用

var lastActionTime = null;
const isWait = () => {
  let currentTime = Date.now();
  if (!lastActionTime) {
    lastActionTime = currentTime
    return false; // ok
  }
  if (lastActionTime && currentTime - lastActionTime > 500) { //点击间隔大于0.5s 可放行
    lastActionTime = currentTime;
    return false; // ok
  } else {
    return true; // no
  }
}

// 使用方法
abc(){
if (isWait) return; // 通过时间间隔来阻断某些多次调用
....

}