javascript - 防止启动后立即触发停止事件的优雅方法

Question

我正在编写一个 jQuery 插件，其中启动/停止插件的事件是可自定义的，因此同一事件可能会启动和停止插件(例如单击启动和单击停止)。

这是一种优雅的方式，理想情况下不涉及超时或解除绑定(bind)和重新绑定(bind)监听器(并且没有太多“isPlaying”“isBeingStarted”标志等)以确保调用正确的回调

Answer 1

(注意:当我发布这个答案时，问题中有一个拼写错误，这使得只要不涉及超时，绑定(bind)/取消绑定(bind)就可以了。)

我认为不需要超时，只需根据需要进行绑定(bind)/取消绑定(bind)即可:

this.bind(startEvent, start);

function start() {
    $(this).unbind(startEvent).bind(stopEvent, stop);
}

function stop() {
    $(this).unbind(stopEvent).bind(startEvent, start);
}

在上面，我假设 startEvent 是配置的启动事件名称(并且我可能会向它添加一个命名空间，例如用户传递“click” 但你添加 ".niftyplugin" 到它导致 startEvent 包含 "click.niftyplugin" 这样你就可以随意绑定(bind)/取消绑定(bind))， stopEvent 是配置的停止事件名称(带有命名空间)。

这是一个完整的示例，其中包含 namespace 并使用 data 来记住选项(如果您愿意，可以使用闭包)- live copy :

// Plugin stuff
(function($) {
  $.fn.niftyPlugin = niftyPlugin;
  function niftyPlugin(options) {
    var data;

    data = {
      startEvent: (options && options.startEvent || "click") + ".niftyplugin",
      stopEvent: (options && options.stopEvent || "click") + ".niftyplugin"
    };

    this.data("niftyPlugin", data).bind(data.startEvent, start);

    return this;
  }

  function start() {
    var $this = $(this),
        data = $this.data("niftyPlugin");
    $this.unbind(data.startEvent).bind(data.stopEvent, stop);
    display("Start");
  }

  function stop() {
    var $this = $(this),
        data = $this.data("niftyPlugin");
    $this.unbind(data.stopEvent).bind(data.startEvent, start);
    display("Stop");
  }

  function display(msg) {
    $("<p>").html(msg).appendTo(document.body);
  }
})(jQuery);

// Use
jQuery(function($) {
  $("#theButton").click(function() {
    $("<p>Non-plugin hook fired</p>").appendTo(document.body);
  }).niftyPlugin({
    startEvent: "click"
  });
});

<小时/>

我看到的唯一其他选择是 stopImmediatePropagation -live example :

// Plugin stuff
(function($) {
  $.fn.niftyPlugin = niftyPlugin;
  function niftyPlugin(options) {
    var startEvent, stopEvent, running = false;

    startEvent = (options && options.startEvent || "click") + ".niftyplugin";
    stopEvent = (options && options.stopEvent || "click") + ".niftyplugin";

    this.bind(startEvent, start).bind(stopEvent, stop);

    return this;

    function start(event) {
      if (running) {
        return;
      }
      running = true;
      display("Start");
      event.stopImmediatePropagation();
    }

    function stop(event) {
      if (!running) {
        return;
      }
      running = false;
      display("Stop");
      event.stopImmediatePropagation();
    }
  }

  function display(msg) {
    $("<p>").html(msg).appendTo(document.body);
  }
})(jQuery);

// Use
jQuery(function($) {
  $("#theButton").click(function() {
    $("<p>Non-plugin hook fired</p>").appendTo(document.body);
  }).niftyPlugin({
    startEvent: "click"
  });
});

不过，我不喜欢它，因为它会干扰该事件的其他处理程序。例如，在上面，如果我将用途更改为:

// Use
jQuery(function($) {
  $("#theButton").niftyPlugin({
    startEvent: "click"
  }).click(function() {
    $("<p>Non-plugin hook fired</p>").appendTo(document.body);
  });
});

...因此插件会在非插件代码 boom 之前抓取事件，非插件代码永远不会看到该事件 ( example )。

因此，尽管有开销，我怀疑绑定(bind)/取消绑定(bind)是您的 friend 。