javascript - 使用自定义事件模拟 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 事件时，还要为窗口对象设置一个 bool 属性。 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 元素(例如 window)来完成这项工作。