小结:js中的防抖和节流
防抖和节流的常见用法
防抖最常见的用法是在浏览器的滚动条的监听上
滚动条执行的次数是非常频繁的,滚动一次会让方法块中的代码执行很多次,我们不需要这么频繁的调用功能块,使用防抖来解决这个问题
//这里使用延时器进行了函数的防抖功能的实现
let timer;
window.onscroll = function () {
clearTimeout(timer);
timer = setTimeout(function () {
let scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
console.log('滚动条的位置:' + scrollTop);
}, 200)
//当滚动条事件一直在执行的时候延时器一直被重复清空,
//当滚动事件停止后延时0.2秒,延时器中的功能块才被调用。
}
节流的一个使用场景是根据用户的输入内容进行实时的响应
用户在文本框中输入的内容使用keyup事件进行监听,用户每按下一个按键都会进行一次后台的校验,我们不需要这么频繁的校验次数,借助延时器进行功能块的节流操作
<body>
<input type="text" id="userSay">
</body>
<script>
let userSay=document.getElementById('userSay');//得到文本框元素
userSay.onkeyup=throttle(function(){ //调用节流的功能块throtle
//这里通常是是ajax的交互 暂时用log进行模拟
console.log(userSay.value);
},1000)
// 封装节流的函数
function throttle(fn,delay){
let flag=true;
//闭包
return function(){
let self=this,args=arguments;
//这句可以理解为
//let self=this;用来保存this指向
//let args=arguments;用来保存函数中所有的引用的参数
if(!flag){
return;
}
flag=false;
setTimeout(()=>{
fn.apply(self,args);
flag=true;
},delay);
}
}
</script>
防抖和节流之间的区别
可以看出来,两者都是为了优化js中高频执行的代码的一种方法
类推到js代码。在一定时间内,代码执行的次数不一定要非常多。达到一定频率就足够了。因为跑得越多,带来的效果也是一样。倒不如,把js代码的执行次数控制在合理的范围。既能节省浏览器CPU资源,又能让页面浏览更加顺畅,不会因为js的执行而发生卡顿。这就是函数节流和函数防抖要做的事。
区别:
–>函数节流是指一定的时间内js方法只跑一次<-- 就像人眨眼睛,一定时间内眨一次眼睛,这是对于函数节流最形象的解释
函数节流的要点是,声明一个变量当标志位,记录当前代码是否在执行【可以参考常见用法的代码】
–>函数防抖是指频繁触发的情况下,只有足够的空闲时间,才执行代码一次<-- 比如生活中的坐公交,就是一定时间内,如果有人陆续刷卡上车,司机就不会开车。只有别人没刷卡了,司机才开车
函数节流的要点,也是需要一个setTimeout来辅助实现。延迟执行需要跑的代码【可以参考常见用法的代码】