什么是函数的防抖和节流？
它是优化处理高频率代码执行的一种手段；比如我们监听resize窗口的变化、scroll滚动、mousemove移动、keypress按下等事件的时候，它会频繁的调用我们绑定的事件，很容易浪费前端资源，从而降低性能；
1、节流手段
节流n秒内只运行一次，在n秒内重复触发，只有一次执行；
常用来应用的场景，在间隔一段时间执行一次回调函数，有：
滚动加载、加载更多、滚动到底部监听；
搜索框，搜索联想功能
实现：
时间戳写法，事件会立即执行，停止触发后没有办法再次执行：
function throttled1(fn,delay = 500){
let oldtime = Date.now();
return function(...args){
let newtime = new Date.now();
if(newtime - oldtime >= delay){
fn.apply(null,args);
oldtime = new Date.now();
}
}
}
使用定时器写法，delay毫秒后运行一次，第二次事件停止触发后依然会再一次运行
function throttled2(fn,delay = 500){
let timer = null;
return function(...args){
if(!timer){
timer = setTimeout(()=>{
fn.apply(this,args)
timer = null;
},delay)
}
}
}
可以将时间戳写法的特性与定时器写法的特性相结合，实现一个更加精确的节流。实现如下:
function throttled(fn,delay){
let timer = null;
let startimer = Date.now();
return function(){
let _that = this;
let curttime = Date.now(); //当前时间
let remaining = delay - (curttime - startimer); //从上一次到现在，还剩下多少时间
let args = arguments
clearTimeout(timer);
if(remaining <=0){
fn.apply(_that,args)
startimer = Date.now();
}else{
timer = setTimeout(fn,remaining);
}
}
}
2、防抖
n秒后执行该事件，若在n秒内被重复触发，则重新计时；
常应用的场景，在连续的事件，只需触发一次回调的场景有：
搜索框搜索输入，只需要用户最后一次输入完，再发送请求；
手机号、邮箱验证输入检测
窗口大小resize，只需要窗口调整完成后，计算窗口大小，防止重复渲染；
实现：
简单版实现：
function debounce(func,wait){
let timer ;
return function(){
let _that = this; //保存this指向
let args = arguments; // 拿到events对象
clearTimeout(timer);
timer = setTimeout(function(){
func.apply(_that,args)
},wait)
}
}
防抖如果需要立即执行，可加入第三个参数用于判断，实现如下：
function debounce(func,wait,imediate){
let timeout;
return function(){
let _that = this;
let args = arguments;
if(timeout) clearTimout(timeout);
if(imediate){
let callNow = !timeout; //第一次会立即执行，以后只有事件执行后才会再次触发
timeout = setTimeout(function(){
timeout = null;
},wait)
if(callNow){
func.apply(_that,args)
}
}else{
timer = setTimeout(function(){
func.apply(_that,args)
},wait)
}
}
}
区别
相同点：
都可以通过setTimeout 实现，目的都是降低回调执行频率，节省计算资源
不同点：
函数防抖，在一段连续操作结束后，处理回调，利用clearTimeout和 setTimeout实现。函数节流，在一段连续操作中，每一段时间只执行一次，频率较高的事件中使用来提高性能
函数防抖关注一定时间连续触发的事件，只在最后执行一次，而函数节流一段时间内只执行一次
例如，都设置时间频率为500ms，在2秒时间内，频繁触发函数，节流，每隔 500ms 就执行一次。防抖，则不管调动多少次方法，在2s后，只会执行一次
摘引：【js每日一题】https://mp.weixin.qq.com/s/xGMUjQiZEI7PV8Wlvf_YNA
网友评论