防抖节流(闭包的实际运用)

  • 防抖函数

    当持续出发事件，一定时间没有再触发该事件，事件函数将执行一次

    如果设定时间之前又触发了一次，则重新延时(定时器)；类似王者荣耀回城，再次点击回城重新计时 

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    function debounce(func, wait) {
        let timeout;
    //利用闭包来延长timer 的声明周期和作用域
        return function () {
            let context = this; // 保存this指向
            let args = arguments; // 拿到event对象

            clearTimeout(timeout) // 清除上一次的函数
            timeout = setTimeout(function(){  // 创建新的事件，并重新计时
                func.apply(context, args)
            }, wait);
        }
    }

  • 节流函数

    当持续触发一个事件的时候，保证一段事件内，只调用一次事件处理；类似王者荣耀技能，只有当CD结束时才能再次释放

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    function throttled2(fn, delay = 500) {
        let timer = null
     //利用闭包来延长timer 的声明周期和作用域
        return function (...args) {
            if (!timer) {
                timer = setTimeout(() => {
                    fn.apply(this, args)
                    timer = null
                }, delay);
            }
        }
    }

相同点：

  • 都可以通过使用 setTimeout 实现
  • 目的都是，降低回调执行频率。节省资源

应用场景：

​ 防抖：

  • 搜索框搜索输入。只需用户最后一次输入完，再发送请求
  • 手机号、邮箱验证输入检测
  • 窗口大小resize。只需窗口调整完成后，计算窗口大小。防止重复渲染。

​ 节流：

  • 滚动加载，加载更多或滚到底部监听
  • 搜索框，搜索联想功能