underScore同款函数throttle的妙用：从防抖到节流，让你掌控函数的执行节奏

前端

2023-12-28 08:38:16

在前端开发中，我们经常需要对函数的执行进行控制，以优化用户体验。防抖和节流是两种常用的函数执行控制技术，它们可以防止函数被过度调用，从而提高性能和用户体验。

underScore是一个流行的JavaScript库，它提供了许多有用的函数，其中包括throttle函数。throttle函数可以用来实现防抖和节流。

原理剖析

防抖

防抖的原理是：如果在一定时间内函数被多次调用，那么只执行最后一次调用。这样可以防止函数被过度调用，从而提高性能和用户体验。

节流

节流的原理是：在一定时间内，函数只执行一次。这样可以防止函数被过度调用，从而提高性能和用户体验。

实现步骤

防抖

function throttle(func, wait) {
  let timeout;
  return function (...args) {
    if (!timeout) {
      timeout = setTimeout(() => {
        timeout = null;
        func.apply(this, args);
      }, wait);
    }
  };
}

节流

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