<input type="submit" id="btn" value="提交">
<script>
var btn = document.getElementById('btn');
// 点击后触发debounce()函数，第一个参数为真实要执行的函数，第二个参数为定时器延迟时间
btn.addEventListener('click',debounce(submit,1000));
//真实要执行的函数
function submit(e){
console.log("提交成功！");
console.log(this)
console.log(e);
}
//防抖函数
function debounce(fn,delay){
//设置time为定时器
var time = null;
//闭包原理，返回一个函数
return function (e){
//如果定时器存在则清空定时器
if(time){
clearTimeout(time);
}
//设置定时器，规定时间后执行真实要执行的函数
time = setTimeout(() => {//此箭头函数里的this指向btn这个按钮
fn.call(this,arguments);//改变真实要执行函数的this指向，原submit函数里面的this指向window
},delay);
}
}
</script>
<input type="submit" id="btn" value="提交">
<script>
var btn = document.getElementById('btn');
// 点击后触发debounce()函数，第一个参数为真实要执行的函数，第二个参数为定时器延迟时间
btn.addEventListener('click',throttle(submit,500));
//真实要执行的函数
function submit(e){
console.log("提交成功！");
console.log(this)
// console.log(e);
}
//节流函数
function throttle(fn,delay){
//bef为上一次执行时间，初始值为0
var bef = 0;
return function (e){
//获取当前时间戳
var now = new Date().getTime();
//如果当前时间减去上次时间大于限制时间时才执行
if(now - bef > delay){
console.log(this);
fn.call(this,arguments);
bef = now;
}
}
}
</script>
