防抖与节流的实际应用及讲解
什么是防抖,什么是节流?
什么是防抖
通俗的讲,防抖就是指一个函数或者一个事件多次触发时如果在没有限制的情况,你调用了多少次,他就执行了多少次;如果你对函数的执行进行了限制,那么他就会在满足限制的情况下执行对应的次数。
举个例子:
// 未限制的情况下
let text = document.getElementById("text")
let number = 1;
function mouse() {
number++
text.innerHTML = numb
}
text.onmousemove = mouse
当我们鼠标在text的盒子范围内移动鼠标时会一直触发mouse函数,但是我们在实际的项目中可能并不需要调用那么多次,所以为了优化性能,我们要对其加以限制。
// 限制的情况下
// 结合实际情景:input的值改变时触发监听
let text = document.getElementById('input_text')//找到对应的input框
function inputText() {
let timeout; //用来就收定时器返回值
return function () {
clearTimeout(timeout); //每次触发input值改变时,首先清空上一次的setTimeout
timeout = setTimeout(() => {
alert(text.value)// 弹出input的内容
} ,1000) // 注意的是如果你写的代码用有用到this,要提前声明this是谁,因为在箭头函数中没有this指向
}
}
text.oninput = inputText()
作用剖析:以oninput事件来说,是input发生变化时就触发,但是我们在项目中并不想他调用那么多次,所以我们通过定时器的方式来对oninput函数进行限制,从而达到防抖的效果。(常用的使用情景:注册账号验证账号密码邮箱等)
什么是节流
高频触发的函数事件等,在一定时间内只可以触发一次,减少函数触发的次数。
以实际应用场景来说:
// 结合实际情景:input的值改变时触发监听
function inputText() {
let flag = true; // 创建一个节流阀
return function () {
if (!flag) return; //判断节流阀开关,如果为假则跳过本次操作
flag = false;// 关闭节流阀
setTimeout(() => {
// 当定时器没有执行的时候标记永远是false,在开头被return掉
alert(text.value)// 弹出input的内容
flag= true; //打开节流阀,给下次调用放行
}, 1000);
};
}
text.oninput = inputText()
作用剖析:节流的意思就是可以减少函数的执行次数,我们可以设置一个节流开关简称节流阀。当节流阀打开时,我们可以调用对应的函数,当节流阀关闭时则无法进行任何操作。
总结:防抖就是在一定时间内只能触发一次函数,如果再次触发则重新计时。节流则是设置一个函数的开关,当开关打开时则可以一直调用,开关关闭就无法再次触发,就像水龙头一样。但是他们的作用差不多,基本上都是为了解决高频事件,减少浏览器负荷。