JavaScript函数节流概念与用法实例详解

函数节流概念

函数节流是一种优化高频率执行某个函数的方案，它能够将您预设的函数以固定的时间间隔执行，避免函数过于频繁的被执行。常用于一些高频触发事件如滚动条滚动、鼠标移动、窗口大小改变等。

如何实现函数节流

在Javascript中，当我们需要实现函数节流时，最简单的方式是通过返回一个闭包函数，内部使用 setTimeout 来进行周期性处理。

function throttle(fn, delay) {
    let timer;
    return function() {
        clearTimeout(timer);
        timer = setTimeout(function() {
            fn.apply(this, arguments);
        }, delay);
    };
}

throttle 函数接收两个参数：

• fn：要进行节流的函数。
• delay：时间间隔，单位毫秒（ms）。

其中，内部利用 setTimeout 函数实现函数的延迟执行。如果在前一个周期内已经设置了 setTimeout，则先将其清除，再设置一个新的 setTimeout。

使用实例

示例一：防抖 + 节流

假设我们有这样一个需求：在窗口缩放时，动态改变页面元素宽高，并且避免因窗口不停变化导致频繁调用。

可以将防抖和节流组合使用，实际上是先采用防抖，稍作等待后再采用函数节流。

function debounce(fn, delay) {
    let timer;
    return function() {
        clearTimeout(timer);
        timer = setTimeout(function() {
            fn.apply(this, arguments);
        }, delay);
    };
}

function throttle(fn, interval) {
    let lastTime, timer;
    return function() {
        let context = this, args = arguments;
        let nowTime = +new Date();
        if (lastTime && nowTime - lastTime < interval) { // 在规定时间内，直接返回
            clearTimeout(timer);
            timer = setTimeout(function() {
                lastTime = nowTime; // 更新最后执行时间
                fn.apply(context, args);
            }, interval);
        } else {
            lastTime = nowTime;
            fn.apply(context, args);
        }
    };
}

window.onresize = debounce(throttle(function() {
    console.log('time:', +new Date());
}, 500), 200);

上面的代码实现了在窗口缩放时，以防抖加函数节流的形式控制函数的执行，防止出现频繁调用的情况。其中：

• 采用防抖函数 debounce 来处理函数的抖动。
• 采用节流函数 throttle 来处理函数的频率。并在 window 对象上注册 onresize 事件。

示例二：滚动时图片懒加载

为了提高页面加载速度，可以采用图片懒加载的方式，使当前可视区域内的图片自动加载，提高用户体验。

但是，滚动时如何避免过度多次调用函数，导致页面性能问题？可以使用函数节流来解决：

function lazyload() {
    let imgs = document.getElementsByTagName('img');
    let len = imgs.length;
    let viewHeight = document.documentElement.clientHeight;
    for (let i = 0; i < len; i++) {
      let rect = imgs[i].getBoundingClientRect();
      if (rect.bottom >= 0 && rect.top < viewHeight) {
        if (imgs[i].getAttribute('src') === 'default.jpg') {
          imgs[i].src = imgs[i].getAttribute('data-src');
        }
      }
    }
}

window.addEventListener('scroll', throttle(lazyload, 500));

对于上述代码，我们在滚动时利用 window.addEventListener 监听 scroll 事件，并使用函数节流返回一个闭包函数来执行懒加载操作，从而避免多次调用、提高性能。

总结

通过学习，我们了解了JavaScript中的函数节流概念、如何实现函数节流、函数节流的应用场景以及两个实际应用的示例。函数节流不仅可以避免频繁执行函数，优化性能，也可以提高用户体验。