- 函数的防抖:对于频繁触发某个操作,我们只识别一次
<script>
//debounce参数如下:
// @params
//func[function]:最后要触发执行的函数
//wait[number]:“频繁”设定的界限
//immediate[boolean]:默认多次操作,我们识别的是最后一次,但是immediate=true,让其识别第一次
//@return
//可以被调用执行的函数
//主题思路:在当前点击完成后,我们等wait这么长时间,看是否还会触发第二次,如果没有触发第二次,属于非频繁操作,我们直接执行想要执行的函数func;如果触发了第二次,则以前的不算了,从当前这次再开始等待...
function debounce(func,wait=300,immediate=false){
let timer=null;
//...params是匿名函数中的事件对象ev,传递的是参数
return function anonymous(...params){
//now的作用是一开始就让它触发
let now=immediate && !timer;
//每次点击之前都把之前设置的定时器清除
clearTimeout(timer);
//重新设置一个新的定时器监听wait时间内是否触发第二次
timer=setTimeout(()=>{
//手动回归到初始状态
timer=null;
//wait这么久的等待中,没有触发第二次
!immediate ? func.call(this,...params):null;
},wait);
//如果是立即执行
now ? func.call(this,...params) : null;
};
}
function handle(){
console.log('OK');
}
// submit.οnclick=handle; //点击一次触发执行一次handle,频繁触发,频繁执行handle
submit.onclick=debounce(handle,500,true);
</script>
- 函数节流:在一段频繁操作中,可以触发多次,但是触发的频率由自己决定
<script>
function throttle(func,wait=300){
let timer=null,
previous=0; //记录上一次操作的时间
return function anonymous(...args){
let now=new Date(),
remaining=wait-(now-previous); //记录还差多久达到一次触发的频率
if(remaining<=0){
window.clearTimeout(timer);
timer=null;
//两次操作的间隔时间已经超过wait了
previous=now;
func.call(this,...args);
}else if(!timer){
//两次操作的间隔时间还不符合触发的频率
timer=setTimeout(()=>{
timer=null;
previous=new Date();
func.call(this,...args);
},remaining)
}
}
}
function handle(){
console.log('OK');
}
//window.οnscrοll=handle; //每一次滚动过程中,浏览器有最快反应时间(5~6ms 13~17ms),只要反应过来就会触发执行一次函数(此时触发频率5ms左右)
window.onscroll=throttle(handle); //控制频率为300ms触发一次
</script>
总结:
点击要做的事情,一般是防抖;
滚动 scroll、输入过程中的模糊匹配 keydown,一般是节流,防止浏览器默认的频率过高。