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

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

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

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

JavaScript - 仅触发一次事件

2020-03-06

描述

确保一个函数只被调用一次。

提示

  • 在闭包中使用一个标志变量 called,当函数经过第一次调用后就将其设置为 true,从而阻止该函数被再次调用
  • 为了让函数能够修改自己的 this 上下文(如在一个事件监听器中),不仅需要使用 funciton 关键字,还需要让函数拥有自己的上下文环境
  • 使用扩展运算符 ... 让函数可以接受任意多个参数

代码

const once = fn => {
  let called = false;
  return function(...args) {
    if (called) return;
    called = true;
    return fn.apply(this, args);
  };
};

示例

只触发一次点击事件:

const startApp = function(event) {
  console.log(this, event); // document.body, MouseEvent
};
document.body.addEventListener('click', once(startApp));

返回总目录

每天 30 秒系列之 JavaScript 代码


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

推荐阅读
2 评论
mymoshou • 2020-03-06
回复 删除

报告,我没看懂那个实例,实例的 addEventListener哪来的

Vanessa • 2020-03-06
回复 删除

js 默认的