防抖与节流的实际应用及讲解_节流防抖的应用场景-CSDN博客

本文链接：https://blog.csdn.net/MyName469/article/details/106056427

防抖与节流的实际应用及讲解

什么是防抖，什么是节流？

什么是防抖
通俗的讲，防抖就是指一个函数或者一个事件多次触发时如果在没有限制的情况，你调用了多少次，他就执行了多少次；如果你对函数的执行进行了限制，那么他就会在满足限制的情况下执行对应的次数。
举个例子：

// 未限制的情况下
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()