定义回调并立即触发它的最佳方法是什么？

Question

在jQuery中，我做了很多这样的事情：

$('#myId').bind('myevent', function() { ... }).trigger('myevent');

当选择器只找到一个元素时工作得很好，但如果有多个匹配，我不希望它多次触发。

有没有办法基本上声明一个匿名函数并一次性执行一次？

或者你必须使它成为非匿名（给它一个名字），传递它，并手动调用它一次？

---

例如，我可能会将.change事件绑定到单选按钮集。 在回调中，我检查实际设置了哪一个，然后显示/隐藏div。 当页面加载时，div需要处于正确的状态，所以我触发事件一次，让JS弄清楚是否应该显示它。 但我真的不想要它发射3次，因为我有3个单选按钮。

Answer 1

method instead of the trigger() method. 使用triggerHandler() 方法而不是trigger() 方法。

这将只调用一次处理程序，并且不允许事件冒泡或触发默认行为。

来自文档：

.triggerHandler（）方法的行为与.trigger（）类似，但有以下例外：

• .triggerHandler（）方法不会导致事件的默认行为（例如表单提交）。
• 虽然.trigger（）将对jQuery对象匹配的所有元素进行操作，但.triggerHandler（）仅影响第一个匹配的元素。
• 使用.triggerHandler（）创建的事件不会冒泡DOM层次结构; 如果它们不是直接由目标元素处理的，它们什么都不做。
• .triggerHandler（）不返回jQuery对象（允许链接），而是返回它导致执行的最后一个处理程序返回的任何值。 如果没有触发处理程序，则返回undefined

Answer 2

如果唯一的问题是当选择器匹配多个元素时，只需使用.first() ：

$('some selector').bind('myevent', function()
{
    // ...
}).first().trigger('myevent');

把它变成一个jQuery插件是非常简单的，你可以像.bind()一样使用它：

$('some selector').bindTrigger('myevent', function () { ... });

插件代码（未测试）

;(function ($)
{
    $.fn.bindTrigger = function ()
    {
        this.bind.apply(this, arguments).first().trigger(arguments[0]);
    };
})(jQuery);

Answer 3

我可以想到两种方法来定义匿名函数并同时调用它。

第一个是使用arguments.callee值使函数返回自身并在该位置调用函数。 一个例子可能会让它更清晰：

el.bind('myevent', (function() {
  ...;
  return arguments.callee; // return the function
})());

第一种方法的问题是，该函数总是返回自身。 另一种方法是使用辅助方法扩展Function.prototype ，如以下示例所示：

// extend the prototype once somewhere
Function.prototype.invoke = function(){
  this();      // invoke...
  return this; // and return the function
};

// invoke() on an anonymous function now calls the function
// and returns the function instead of the result.
el.bind('myevent', (function(){
  ...
}).invoke());