h5-vue-uniapp-节流防抖共通方案

发布时间 2023-06-26 16:00:55作者: 姜佳泉

参考:https://juejin.cn/post/6959161295358656520

描述:防止C端客户重复点击付款按钮而导致两次调起后台付款API

建议使用:


/* 
func:要进行防抖处理的函数
delay:要进行延时的时间
immediate:是否使用立即执行 true立即执行 false非立即执行
*/
function debounce(func,delay,immediate){
  let timeout; //定时器
  return function(arguments){
    // 判断定时器是否存在,存在的话进行清除,重新进行定时器计数
    if(timeout) clearTimeout(timeout);
    // 判断是立即执行的防抖还是非立即执行的防抖
    if(immediate){//立即执行
      const flag = !timeout;//此处是取反操作
      timeout = setTimeout(()=>{
        timeout = null;
      },delay);
      // 触发事件后函数会立即执行,然后 n 秒内不触发事件才能继续执行函数的效果。
      if(flag) func.call(this,arguments);
    }else{//非立即执行
      timeout = setTimeout(()=>{
        func.call(this,arguments);
      },delay)
    }

  }
}