使用自定義事件模擬domready事件（mootools）

Question

我需要觸發一次只有一個自定義事件，其功能類似於domready事件，因爲如果在事件發生後添加新事件，它們會立即觸發。

這是一些代碼，無法執行，直到一定的數據和資源進行初始化，所以我想要做這樣的事情：

// I am including a script (loadResources.js) to load data and other resources, 
// when loadResources.js is done doing it's thing it will fire resourcesAreLoaded with: 
window.fireEvent('resourcesAreLoaded'); 

window.addEvent('resourcesAreLoaded', function() { 
    // this is fine 
}); 
$('mybutton').addEvent('click', function() { 
    window.addEvent('resourcesAreLoaded', function() { 
     // this is not fine, because resourcesAreLoaded has already fired 
     // by the time the button is clicked 
    }); 
}); 

如果可能的話，我想resourcesAreLoaded像domready的功能，並執行代碼立即如果事件已經發射：

window.addEvent('testIsReady', function() { 
    alert('firing test');  
}); 
window.fireEvent('testIsReady'); 
window.addEvent('test', function() { 
    // this will never execute unless I call fireEvent('testIsReady') again 
    alert('test 2');   
}); 

window.addEvent('domready', function() { 
    alert('domready is firing');   
}); 

window.addEvent('domready', function() { 
    setTimeout(function() { 
     alert('domready has already fired, so this is executed immediately');  
    }, 500); 
}); 

Answer 1

您將不得不存儲自定義事件是否已被解僱的狀態。一個好地方是Element Store。

自定義事件可以定義各種屬性。這種情況的一個有用的屬性是onAdd，它基本上是一個函數，當您通過調用<element>.addEvent(<name>, <fn>)將該事件添加到某個DOM元素時會調用該函數。你的函數onAdd將被調用，並通過fn作爲參數。檢查事件是否已經被觸發，如果是，立即撥打fn，否則什麼也不做。詳細瞭解底部Hash: Element.Events部分下自定義事件的屬性。

Element.Events.resourcesLoaded = { 
    onAdd: function(fn) { 
     if(window.retrieve('resourcesLoaded')) { 
      fn.call(this); 
     } 
    } 
}; 

當您第一次觸發resourcesLoaded事件時，還爲窗口對象設置了布爾屬性。 onAdd可以從現在開始提取此值，以查看是否應立即觸發事件處理程序。

window.fireEvent('resourcesLoaded'); 
window.store('resourcesLoaded', true); 

這應該做到這一點。這裏有兩個測試場景：沒有被加載

1. 資源，所以回調不應該立即解僱。

   window.addEvent('resourcesLoaded', function() { alert("should wait"); });

2. 資源有被加載，所以立刻回調火災。

   window.addEvent('resourcesLoaded', function() { alert("shouldn't wait"); });

我把這個從MooTools的源代碼。這是它如何處理domready事件。

在附註上，在您自己的自定義對象內部實現事件同樣很容易，並且如果事件與DOM無關，則不必依賴諸如窗口之類的DOM元素來完成任務。