使用自定义事件模拟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是基本上是通过调用将该事件添加到某个DOM元素时调用的函数<element>.addEvent(<name>, <fn>).您的函数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元素来完成工作.