自制简易throttle函数

作者: kofzx | 来源:发表于2019-06-06 17:26 被阅读0次

throttle.js

/**
 * 防止连续点击的函数
 * @param {function} func 需要执行的函数
 * @param {number} delay 多久后才能接着点
 */
const throttle = function(func, delay) {
  let isClick = true, // 是否可点击
      timer = null;
  return function() {
    if (!timer) {
      timer = setTimeout(() => {
        isClick = true;
        clearTimeout(timer);
        timer = null;
      }, delay);
    }
    if (!isClick) return false;  
    isClick = false;
    // this为调用throttle处的作用域
    // 同时保证arguments传参
    func.apply(this, arguments);
  };
};

test.html

<!DOCTYPE html>
<html>
<head>
    <title>test my throttle</title>
</head>
<body>
    <button onclick="test()">test</button>
    <script src="./throttle.js"></script>
    <script>
        // 1秒内不会重复触发
        const test = throttle(function() {
            console.log('test exec');
        }, 1000);
    </script>
</body>
</html>

这样连点就不会重复触发函数了

微信截图_20190606174735.png