拒绝卡顿，JS优化妙招：防抖与节流

2023-11-19 15:44:55

在现代网络应用中，JavaScript（JS）作为一门强大的编程语言，被广泛应用于前端开发。为了提升网页的响应速度和用户体验，JS优化至关重要。其中，防抖和节流技术是两个常用的优化手段，可以有效解决因短时间内大量触发某函数而导致的性能问题。本文将深入探讨防抖和节流的原理、应用场景以及实现方式，帮助您掌握这些优化技巧，打造流畅的用户体验。

防抖与节流的原理

防抖和节流都是为了解决因短时间内大量触发某函数而导致的性能问题。它们的核心原理都是将函数的执行延迟一段时间，从而减少函数的调用次数。

防抖：防抖适用于需要在一段时间内只执行一次的场景。例如，在输入框中输入内容时，如果每次输入都触发一次“ajax请求”（此处是console），将会浪费请求资源。此时，可以使用防抖技术，即在输入框中输入内容后，延迟一段时间再触发“ajax请求”。这样，可以有效减少请求次数，提升性能。

节流：节流适用于需要在一段时间内只执行一定次数的场景。例如，在按钮上绑定点击事件时，如果每次点击都触发一次“ajax请求”，可能会导致服务器压力过大。此时，可以使用节流技术，即在按钮被点击后，在一定时间内只执行一次“ajax请求”。这样，可以限制请求次数，保护服务器资源。

防抖与节流的应用场景

防抖和节流技术在实际开发中有着广泛的应用场景，包括：

输入框中的搜索建议 ：在输入框中输入内容时，防抖技术可以延迟触发搜索建议的请求，从而减少请求次数，提升性能。
按钮的多次点击 ：在按钮上绑定点击事件时，节流技术可以限制点击次数，防止按钮被多次点击而触发多次请求，从而保护服务器资源。
滚动事件 ：在页面滚动时，节流技术可以限制滚动事件的触发次数，从而减少对浏览器的渲染压力，提升页面性能。
其他场景 ：防抖和节流技术还可以应用于其他需要控制函数执行频率的场景，例如图片懒加载、视频播放控制、游戏中的动画渲染等。

防抖与节流的实现方式

在JS中，可以通过以下方式实现防抖和节流：

防抖：

function debounce(func, wait) {
  let timeout;
  return function() {
    const context = this;
    const args = arguments;
    if (timeout) clearTimeout(timeout);
    timeout = setTimeout(() => {
      func.apply(context, args);
    }, wait);
  };
}

节流：

function throttle(func, wait) {
  let lastCall = 0;
  return function() {
    const context = this;
    const args = arguments;
    const now = Date.now();
    if (now - lastCall >= wait) {
      func.apply(context, args);
      lastCall = now;
    }
  };
}