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 代码