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

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

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

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

功能 - 防止抖动

2020-02-26

描述

创建一个防止抖动的函数,使其延迟调用提供的函数,直到上次调用该函数至少经过了 ms 毫秒

提示

  • 防止抖动函数每一次被调用前,都需要使用 clearTimeout() 清空上一次将要运行的 timeout
  • 使用 setTimeout() 创建一个新的 timeout,将调用的函数延迟至少 ms 后在执行
  • 使用 Function.prototype.apply() 设置函数的上下文为 this,并提供必要的参数
  • 第二个设置 timeout 的参数 ms 的默认值为 0

代码

const debounce = (fn, ms = 0) => {
  let timeoutId;
  return function(...args) {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => fn.apply(this, args), ms);
  };
};

示例

250 毫秒后打印最近一次窗口变化后的尺寸:

window.addEventListener(
  'resize',
  debounce(() => {
    console.log(window.innerWidth);
    console.log(window.innerHeight);
  }, 250)
); // Will log the window dimensions at most every 250ms

返回总目录

每天 30 秒系列之 JavaScript 代码


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

留下你的脚步