前端小白的学习之路(防抖与节流)

简介：防抖与节流思想

文章目录

• 一、防抖与节流是什么？
• 二、防抖与节流
  • 1.防抖（Debouncing）
  • 2.节流（Throttling）
• 总结

---

一、防抖与节流是什么？

用户在与页面进行交互的过程中，往往会出现事件频发触发的情况。事件如果被频繁触发，就会导致函数（代码）被多次频繁的执行。防抖（Debouncing）和节流（Throttling）是用来控制某些频繁触发的事件（如滚动事件、resize事件、输入框输入事件等）的执行次数的两种常用编码思想。

二、防抖与节流

1.防抖（Debouncing）

• 当事件触发后，防抖会在一定的延迟时间后再执行回调函数。
• 如果在延迟时间内又触发了相同的事件，则会重新计时延迟时间。
• 如果在延迟时间内没有再次触发相同的事件，则执行回调函数。

用途：适用于输入框输入事件、窗口大小改变事件等需要等待一定时间后再执行的情况，以减少频繁的函数调用，提升性能

封装防抖函数：

function debounce(callback, time = 300) {
    // 定义变量记录延迟函数
    var d = null;
    // 返回一个函数
    return function () {
        // 判断延迟函数是否正在执行， 是，就清除
        if (d != null) clearTimeout(d);
        // 记录当前函数作用域的this (事件调用者)
        var _this = this;
        // 记录事件对象
        var _event = arguments[0];// 事件对象
        // 执行延迟函数
        d = setTimeout(function () {
            //采用 && “且”逻辑运算符 判断是否存在回调函数，是，就调用callback
            // 并该callback作用域的this指向，指向事件调用，最后传递事件对象给callback
            callback && callback.apply(_this, [_event]);
            // 释放变量d
            d = null;
        }, time)
    }
}

2.节流（Throttling）

• 当事件触发后，节流会在一定的时间间隔内执行一次回调函数。
• 即使在时间间隔内触发了多次相同的事件，也只会执行一次回调函数。
• 节流会在每个时间间隔的开始或结束时执行回调函数，取决于实现的方式。

用途：适用于滚动事件、鼠标移动事件等需要在一段时间内保持事件处理函数的执行频率的情况，以减少函数调用次数，优化性能。

封装节流函数：

function throttle(callback, time = 300) {
    //开关布尔值
    var isShow = false;
    // 返回一个函数
    return function () {
        // 判断布尔值是否为true
        if (isShow) {
            // 终止代码
            return;
        }
        else {
            // 设置布尔值为true
            isShow = true;
            // 记录当前函数作用域的this （事件调用者）
            var _this = this;
            // 事件对象
            var arg = arguments[0];
            // 执行延迟（布尔值为false才执行）
            setTimeout(function () {
                // 执行代码
                if (callback) callback.apply(_this, [arg]);
                // 重置开关
                isShow = false;
            }, time)
        }
    }
}

---

总结

防抖与节流是编码的重要思想，能够提升代码的质量，优化代码的性能，需要熟悉原理能在各个场景中应用。