在前端开发中,经常会给元素添加一些事件,例如:click
、scroll
、input
、mousemove
。
这些事件会存在一些隐患,比如点击事件,用户点击时可能手抖连续点击了两次。
或者点击后发现没反应,频繁的点击按钮。
按钮一般都会与我们的后台服务有交互功能,请求数据接口等等。
如果像用户的操作一样,频繁去向服务器发送请求,这会占用很多不必要的资源,甚至出现bug。
防抖
函数防抖,如字面意思一样,防止用户手抖,多次点击,但是事件只需执行一次。
第一种: 快速点击时,只触发一次,然后停止点击一段时间后才能再次点击触发。
function fdFun(cb){
let timeid; // 定时器id
return function(){
let curentFlag = !timeid; // 是否初始化了定时器,取反
if(timeid) clearTimeout(timeid); // 如果定时器存在,则清除
timeid = setTimeout(function(){ // 初始化定时器
timeid = null; // 1s后,清空
},1000);
if(curentFlag){ // 如果没有定时器等待,就执行回调
cb();
}
}
}
// 快速点击,1s内也只执行一次
document.querySelector('#btn').onclick = fdFun(function(){
console.log('do something...');
});
第二种:快速点击不触发,最后一次点击停止后一段时间触发。
function fdFun(cb){
let timeid;
return function(){
if(timeid) clearTimeout(timeid);
timeid = setTimeout(function(){
cb();
},1000);
}
}
节流
函数节流,意思是函数按照 一定时间规律执行,比如:快速点击时,每过1秒执行一次。
第一种:使用定时器实现
function jlFun(cb){
let timeid;
return function(){
if(!timeid){ // 如果没有定时器等待就执行
timeid = setTimeout(function(){ // 初始化定时器
cb(); // 1s后执行回调
clearTimeout(timeid); // 1s后清除定时器
timeid = null; // 1s后将定时器id清空
},1000);
}
}
}
document.querySelector('#btn').onclick = jlFun(function(){
console.log('do something...');
});
第二种:使用时间戳记录实现
function jlFun(cb){
let beforeTime = new Date(); // 记录下时间戳
return function(){
let waitTime = 1000; // 需等待的时间
let nowTime = new Date(); // 当前点击时间戳
if(nowTime - beforeTime >= waitTime){ // 当点击时的时间戳,大于等待时间则执行
cb();
beforeTime = nowTime; // 将上一次执行的时间,设置为这一次触发的时间戳
}
}
}
document.querySelector('#btn').onclick = jlFun(function(){
console.log('do something...');
});
![公众号:前端很忙 公众号:前端很忙](https://i-blog.csdnimg.cn/blog_migrate/f756ed2569a79b2ea036f8730cd27e64.png)
关注公众号【前端很忙】