《JavaScript 创建一次性事件》

有时候需要事件只执行一次，例如验证码刷新提示只出现一次。以下是三种常见实现。

1. 方法一：封装 onetime 函数

        
      
function onetime(node, type, callback) {
  // 创建事件
  node.addEventListener(type, function (e) {
    // 触发后立即移除该事件
    e.target.removeEventListener(e.type, arguments.callee);
    // 调用处理函数
    return callback(e);
  });
}

// 绑定
onetime(document.getElementById("myelement"), "click", handler);

function handler(e) {
  alert("You'll only see this once!");
}

2. 方法二：在 handler 中将自己移出

        
      
document.getElementById("myelement").addEventListener("click", handler);

function handler(e) {
  // 移除当前 handler
  e.target.removeEventListener(e.type, arguments.callee);
  alert("You'll only see this once!");
}

3. 方法三：通过包装函数实现

        
      
function once(fn, context) {
  var result;

  return function () {
    if (fn) {
      result = fn.apply(context || this, arguments);
      fn = null;
    }
    return result;
  };
}

// Usage
var canOnlyFireOnce = once(function () {
  console.log('Fired!');
});

canOnlyFireOnce(); // "Fired!"
canOnlyFireOnce(); // nothing

原理：第一次调用后把 fn 置空，后续调用直接返回第一次的结果。

参考

https://www.sitepoint.com/create-one-time-events-javascript/
https://davidwalsh.name/javascript-once

阅读 — · 全站 —