防抖
防止频繁的点击,设置一个定时器,每次点击清空计时,当计时结束后回调点击事件。是为了短时间多次点击只作用一次,不至于多次请求而使服务器负担加重。
function antiShake(fn){
var timer = null;
return function(){
clearTimeout(timer);//点击后立即清空计时,重新计时
timer = setTimeout(()=>{
fn.call(this);//绑定回调函数的作用域
console.log('start record');
},1000)//定时1s
}
}
function click(){
console.log("click!");
}//点击事件
var btn = document.getElementById('button');//获取button
btn.addEventListener('button',antiShake(click));
节流
触发点击事件后设定一个计时器,当计时存在时该点击会直接返回空数据,定时结束后即可回调函数。目的在于控制每段时间只执行一次点击事件。
function throttle(fn){
var timer = null;
var click = true;
return function(){
if(!click) return;
else{
click = false;
timer.setTimeout(()=>{
fn.call(this);
},1000)
}
}
}
function get(){
console.log("hello,mayuri");
}
var btn = document.getElementById('button');
btn.addEventListener('button',throttle(get));