闭包与节流、防抖

原创已于 2024-09-24 14:43:14 修改 · 447 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#节流防抖 #闭包 #javascript

于 2024-05-12 18:46:38 首次发布

在前端开发和用户交互中，节流（Throttling）和防抖（Debouncing）是两个常用的技术，用于优化高频率触发的事件，比如滚动、窗口大小改变、键盘输入等。这些技术可以帮助我们避免不必要的性能开销和提升用户体验。

闭包：让开发者可以从内部函数访问外部函数的作用域。

闭包很有用，因为它允许将函数与其所操作的某些数据（环境）关联起来。这显然类似于面向对象编程。在面向对象编程中，对象允许我们将某些数据（对象的属性）与一个或者多个方法相关联。

因此，通常你使用只有一个方法的对象的地方，都可以使用闭包。

闭包还可以把多参数的函数变成单参数的函数。例如，要计算xy可以用Math.pow(x, y)函数，不过考虑到经常计算x2或x3，我们可以利用闭包创建新的函数pow2和pow3：

function make_pow(n) {
    return function (x) {
        return Math.pow(x, n);
    }
}
// 创建两个新函数:
let pow2 = make_pow(2);
let pow3 = make_pow(3);

console.log(pow2(5)); // 25
console.log(pow3(7)); // 343

节流（Throttling）

定义：

节流是指在一定时间间隔内只执行一次特定操作。它适用于那些在短时间内被频繁触发的事件，如页面滚动、鼠标移动等。通过节流，你可以控制函数的执行频率，确保在给定的时间段内不会频繁执行函数。

应用场景：

假设你有一个页面滚动事件，当用户滚动页面时会触发某个函数。使用节流，在指定时间内（比如每200毫秒）只执行一次函数，无论用户滚动了多少次。

手写代码

//使用时间戳实现
function throttle(func, delay) {  
  let lastTime = Date.now();  
  return function(...args) {  
    const now = Date.now();  
    if (now - lastTime > delay) {  //超过指定的时间间隔，执行函数
      func.apply(this, args);
      lastTime = Date.now();         
    }  
  };  
}  
  
const throttledFunc = throttle(function() {  
  console.log('Function executed');  
}, 1000);  
  
window.addEventListener('scroll', throttledFunc);

//使用定时器实现
function throttle(func, delay) {  
  let timer = null;  
  return function(...args) {  
    if (!timer) {    //没有定时器
      timer = setTimeout(() => {  
        func.apply(this, args);  
        timer = null; // 保证在delay毫秒内，只有一个定时器工作
      }, delay); 
    }  
  };  
}

防抖（Debouncing）

定义：

防抖是指在事件被触发后，等待一定时间后再执行操作。如果在这个等待时间内再次触发了该事件，则重新开始等待。它适用于那些在短时间内被频繁触发的事件，但你只想在事件停止触发一段时间后执行操作的情况。

应用场景：

假设你有一个搜索框，用户在输入框中输入搜索关键词时会触发搜索函数。使用防抖，在用户停止输入一段时间后（比如500毫秒），再执行搜索函数。如果用户在这段时间内继续输入，那么重新开始计时，直到用户停止输入。

手写代码

//使用定时器实现
function debounce(func, delay) {  
  let timer = null;  
  return function(...args) {  
    clearTimeout(timer);  //清空定时器，重新计时
    timer = setTimeout(() => {  
      func.apply(this, args);  
    }, delay);            //delay毫秒后执行函数
  };  
}

优化防抖

使用成熟的库：
许多流行的 JavaScript 库（如 jQuery、lodash、underscore 等）都提供了防抖函数的实现。这些实现经过了广泛测试和优化，通常比手写的防抖函数更可靠和高效。
减少不必要的计算：
确保在防抖函数内部执行的代码尽可能高效。避免在防抖函数内部进行复杂的计算或 DOM 操作，这些操作可能会导致性能瓶颈。
使用闭包和变量作用域：
防抖函数通常使用闭包来存储定时器和其他状态信息。确保正确使用闭包和变量作用域，以避免内存泄漏和意外的行为。
考虑函数执行上下文：
防抖函数通常会影响函数的执行上下文（即 this 的值）。确保防抖函数能够正确处理函数的执行上下文，特别是在使用箭头函数或 Function.prototype.bind 时。
使用合适的延迟时间：
防抖函数的延迟时间（即两次函数调用之间的最小间隔时间）是一个重要的参数。根据应用场景和性能需求，选择合适的延迟时间。过短的延迟时间可能导致函数被频繁调用，而过长的延迟时间则可能导致用户体验下降。
优化防抖逻辑：
对于某些应用场景，可能需要更复杂的防抖逻辑。例如，你可能希望在用户停止输入一段时间后才触发函数，而不是在用户每次输入时都触发。这时，可以使用“尾随”或“领先”的防抖策略来实现。
避免使用全局变量：
在防抖函数中使用全局变量可能会导致意外的副作用和难以调试的问题。尽量使用局部变量或函数参数来传递信息。
测试和性能分析：
对防抖函数进行充分的测试，以确保其在各种情况下都能正常工作。同时，使用性能分析工具来检查防抖函数是否对页面性能产生了负面影响。如果发现性能问题，及时进行调整和优化。