JavaScript 中怎么用柯里化实现节流函数的频率限制-js教程-PHP中文网

柯里化不直接实现节流，而是用于预设节流参数（如delay或配置项）以提升复用性；节流核心是时间戳比对与状态管理，柯里化仅优化api封装。

javascript 中怎么用柯里化实现节流函数的频率限制

柯里化本身不直接实现节流（throttling），它和节流是两种不同概念：柯里化是把多参数函数转为一系列单参数函数的过程；节流是控制函数执行频率的策略。但你可以用柯里化来配置节流函数——比如预先固定时间间隔，生成一个“带默认延迟的节流版本”。下面讲清楚怎么结合二者实用地实现频率限制。

节流函数的核心逻辑要先写对

节流的关键是：在指定时间窗口内，最多只让原函数执行一次。常用思路是记录上一次执行时间戳，每次调用时对比当前时间，超时才执行并更新时间戳。

基础节流实现示例：

function throttle(fn, delay) {
  let lastTime = 0;
  return function(...args) {
    const now = Date.now();
    if (now - lastTime >= delay) {
      fn.apply(this, args);
      lastTime = now;
    }
  };
}

用柯里化预设 delay 参数

柯里化在这里的作用是：把 throttle 变成可配置默认间隔的工厂函数。例如，你想批量创建“每 300ms 最多执行一次”的节流函数，不用每次都传 300。

柯里化版节流（单参数柯里化）：

Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

const throttleBy = (delay) => (fn) => {
  let lastTime = 0;
  return function(...args) {
    const now = Date.now();
    if (now - lastTime >= delay) {
      fn.apply(this, args);
      lastTime = now;
    }
  };
};
<p>// 使用：先固定 delay，再传 fn
const throttle300 = throttleBy(300);
const handleScroll = throttle300(() => console.log('scrolled'));
window.addEventListener('scroll', handleScroll);</p>

支持更灵活配置的柯里化节流

实际项目中可能需要支持 leading/trailing 行为（首次立即执行 or 结束后补一次）。可以扩展柯里化层级，让配置更清晰：

第一层：固定 delay
第二层：接收配置对象（如 { leading: true, trailing: false }）
第三层：接收原始函数

const throttleConfigurable = (delay) => (options = {}) => (fn) => {
  let lastTime = 0;
  let timer = null;
  const { leading = true, trailing = false } = options;
<p>const throttled = function(...args) {
const now = Date.now();
const expired = now - lastTime >= delay;</p><pre class="brush:php;toolbar:false;">if (leading && !timer && !expired) {
  fn.apply(this, args);
  lastTime = now;
} else if (expired) {
  fn.apply(this, args);
  lastTime = now;
  if (trailing && timer) clearTimeout(timer);
  timer = null;
} else if (trailing && !timer) {
  timer = setTimeout(() => {
    fn.apply(this, args);
    lastTime = Date.now();
    timer = null;
  }, delay - (now - lastTime));
}

};

throttled.cancel = () => { if (timer) clearTimeout(timer); timer = null; };

return throttled; };

// 使用示例 const fastThrottle = throttleConfigurable(16)({ leading: true, trailing: false }); const animate = fastThrottle(() => requestAnimationFrame(render));