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
网友评论