防重复点击按钮

657 阅读1分钟

和防抖按钮有点区别,一段时间内按钮多次触发,只执行1次(不会重置时间)。

// a.js

//挂在window下
let switchState; 
function loadBtn() {
  // 循环
  let timeOut = null;
  // 触发状态 是否允许触发
  let loading = false;

  // 状态修改 s函数在window下
  switchState = function() {
    loading = !loading;
  }

  // 执行方法
  function shell(fn, wait = 1000){
    // 是否允许触发
    if(!loading) {
      // 修改触发状态为不允许
      switchState();

      timeOut = setTimeout(function(){
        // 执行内容
        fn();
        // 停止循环
        clearTimeout(timeOut)
        // 清除循环
        timeOut = null;
        // 修改触发状态为允许
        switchState();
      }, wait)
    };
  }

  return shell;
}

export default { 
    loadBtn: loadBtn(),
}

------------------
// b.js

import { loadBtn } from 'a.js'

loadBtn(() => {...}, 2000);

新手随笔,不对的地方还请大佬指出!

借鉴自阮一峰闭包资料:www.ruanyifeng.com/blog/2009/0…