🎶 Sym - 一款用 Java 实现的现代化社区(论坛/BBS/社交网络/博客)平台

📕 思源笔记 - 一款桌面端笔记应用,支持 Windows、Mac 和 Linux

🎸 Solo - B3log 分布式社区的博客端节点,欢迎加入下一代社区网络

♏ Vditor - 一款浏览器端的 Markdown 编辑器

JavaScript - 函数在一定时间内只能执行一次

2020-03-12

描述

创建一个受限制的函数,每 wait 毫秒最多只能调用提供的函数一次。

提示

  • 使用 setTimeout()clearTimeout() 来限制给定的方法 fn
  • 使用 Function.prototype.apply()this 上下文应用到受限函数中,并提供其必要的 arguments
  • 使用 Date.now() 跟踪上一次调用受限函数的时间
  • 第二个参数 wait 用于设置受限函数每次执行的时间间隔,默认值为 0

代码

const throttle = (fn, wait) => {
  let inThrottle, lastFn, lastTime;
  return function() {
    const context = this,
      args = arguments;
    if (!inThrottle) {
      fn.apply(context, args);
      lastTime = Date.now();
      inThrottle = true;
    } else {
      clearTimeout(lastFn);
      lastFn = setTimeout(function() {
        if (Date.now() - lastTime >= wait) {
          fn.apply(context, args);
          lastTime = Date.now();
        }
      }, Math.max(wait - (Date.now() - lastTime), 0));
    }
  };
};

示例

当窗口拖动时,每 250 毫秒内只打印一次窗口的尺寸:

window.addEventListener(
  'resize',
  throttle(function(evt) {
    console.log(window.innerWidth);
    console.log(window.innerHeight);
  }, 250)
); 

返回总目录

每天 30 秒系列之 JavaScript 代码


欢迎注册黑客派社区,开启你的博客之旅。让学习和分享成为一种习惯!

留下你的脚步