节流和防抖

节流和防抖

作用

解决页面卡顿等性能问题

节流函数

一定时间内,某个函数只执行一次。By using throttle function, we don’t allow to our function to execute more than once every X milliseconds.

function throttle (callback, limit) {
    var waiting = false;                      // 一开始,处于非等待状态

    return function () {                      // 返回一个节流函数
        if (!waiting) {                       // 如果没有等待
            callback.apply(this, arguments);  // 执行函数
            waiting = true;                   // 等待置位 true
            setTimeout(function () {          // limit 时间之后
                waiting = false;              // 重新置位 false
            }, limit);
        }
    }
}
  • callback 函数:哪个函数需要节流?
  • limit:多长时间之后可以重新调用

也可以基于时间判断来实现:

function throttle(callback, limit) {
    let lastTime = 0;

    return function() {
        let now = new Date();
        if (now - lastTime >= limit) {
            callback();
            lastTime = now;
        }
    }
}

节流应用场景

  • 滚动加载
  • 表单重复提交
  • 搜索联想功能

防抖

频繁触发时,不执行函数,等最后一次触发延迟一定时间再执行函数,前面的 n 次触发都被忽略掉。(The Debounce technique allow us to “group” multiple sequential calls in a single one.)常用于:防止按钮频繁点击,比如发送验证码的按钮之类的。

const debounce = (callback, delay = 250) => {
    let timeoutId;

    return (...args) => {
        clearTimeout(timeoutId);
        timeoutId = setTimeout(() => {
            timeoutId = null;
            callback(...args);
        })
    }
}

防抖应用场景

  • 搜索框搜索输入(注意这和上面的搜索联想是不同的)
  • 手机号、邮箱验证检测输入
  • 窗口大小 Resize