定義回調並立即觸發它的最佳方法是什么？

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());