复制代码可直接运行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JS防抖函数</title>
</head>
<body>
<button>付款</button>
<script>
// 获取button按钮元素
const btn = document.querySelector("button");
// 定义付款操作函数
function payMoney() {
console.log("付款成功");
}
// 定义防抖函数
// func: 点击按钮要执行的函数
// delay: 防抖时间
function debounce(func, delay) {
// 设置定时器标识
let timer;
// 难点返回事件绑定函数
return function () {
// func指定this
let context = this;
// func参数
let args = arguments;
// 先清除定时器
clearTimeout(timer);
//设置定时器
timer = setTimeout(() => {
// 调用函数
func.apply(context, args);
}, delay);
}
}
// 绑定点击事件
btn.addEventListener("click", debounce(payMoney, 1000))
</script>
</body>
</html>
原理：事件响应函数在一段时间后才执行，如果这段时间内再次调用，则重新计算执行时间。\ 意思是如果在规定的时间内无论你怎么触发事件都不会执行，只有在最后一次触发事件后并且在规定的时间内无触发事件操作才会执行。
扩展：通过新增一个参数初始化为true，点击后改变值为false，点击前判断是为true则执行 否则不执行
let clickPay = true;//未点击
btn.addEventListener("click", function () {
if (clickPay) {
document.getElementById("product_form").submit();
clickPay = false;//已点击
}else{
//不执行
}
})
