确定对象何时准备就绪.我应该使用事件吗
Determining when objects are ready. Should I be using events?
我正在编程一个画布赛车游戏,并计划使用事件来确定每个游戏对象何时初始化并准备使用。首先,我尝试将事件侦听器添加到我的对象中,但意识到它们只能附加到html元素。作为一种变通方法,我在窗口对象中添加了一个监听器。
我很感激关于我是否应该使用事件来解决这个问题的建议,以及是否有任何常见的模式/方法我应该考虑?我本来打算阅读观察者模式,这似乎适合这种情况吗?
下面的代码片段显示了我目前正在做的事情。当Track对象的所有项目都被加载时,它会分派一个事件,该事件由附加到窗口对象的事件侦听器捕获。
Main:
function game() {
var loadCount = 0;
var itemsToLoad = 10;
window.addEventListener("finishedLoading", itemLoaded, false);
function itemLoaded(event) {
loadCount++;
if(loadCount >= itemsToLoad)
{
gameStateFunction = title;
}
}
}
跟踪对象:
function Track(name, bgTileSheet) {
this.backgroundImage = new Image();
this.itemsLoaded = 0;
this.itemsToLoad = 3;
this.loadedEvent = new CustomEvent("finishedLoading", {
detail: {
objectType: "track"
},
bubbles: true,
cancelable: false
});
this.centerPath = null;
}
Track.prototype.updateLoadProgress = function() {
this.itemsLoaded++;
if(this.itemsLoaded >= this.itemsToLoad)
{
dispatchEvent(this.loadedEvent);
}
};
Track.prototype.init = function() {
//calls loadItems() when XML data is ready
};
Track.prototype.loadItems = function() {
this.loadBackground();
this.loadMapDimensions();
this.loadPaths();
};
Track.prototype.loadBackground = function() {
var self = this;
this.backgroundImage.addEventListener("load",
function() {
self.updateLoadProgress();
},
false);
this.backgroundImage.src = Track.TILESHEET_DIR + this.bgTileSheet;
};
是的,我想说事件就是这样做的方式。只是您必须将事件的定义从仅可附加到HTML元素的定义放宽。
你最终用于这类事情的大多数模式——观察者、订阅者、中介者等等——都会在某种意义上使用一种人为的事件形式。
您可能想要了解的一件事是jQuery的延迟对象。这些通常与AJAX相关,但也可以以非常有效的方式与人为的主观事件一起使用。
几个月前,我写了一篇关于这个的博客文章,展示了一种技巧。
以下是一个快速示例:
function SomeClass() {
this.ready = false;
this.deferred = $.Deferred();
}
SomeClass.prototype.makeReady = function() {
this.ready = true;
this.deferred.resolve();
}
var myInstance = new SomeClass();
//listen for ready
$.when(myInstance.deferred).done(function() { alert('object is ready!'); });
//after a while, let's say we're ready
setTimeout(function() { myInstance.makeReady(); }, 2000);
这里的超时只是对您的真实环境的模拟,在那里您将设置object-doAJAX请求、其他代码等等。
最后,虽然您确实不能将事件直接附加到对象,但您可以通过getter/setter将对象附加到对象属性。
相关文章:
- 我应该/如何清除mousemove JQuery事件侦听器
- 我应该如何在backbone.mariente中测试/监视此类事件
- ext.js中还有其他事件我应该使用吗
- 我应该在点击上放置什么事件
- 我应该如何添加JavaScript onclick事件来链接到较低的文件夹
- 确定对象何时准备就绪.我应该使用事件吗
- 我应该使用什么事件在 jQuery 中异步提交表单
- 我应该使用window.onload事件吗?
- NodeJS&Socket.IO:发出请求事件并获取响应,我应该在何时/何地绑定侦听器
- 我应该将哪种事件类型与类型为“range”的输入一起使用
- JS:我应该在点击(或等效)事件中设置一个var/let吗?
- 我应该使用什么尝试并捕获块或错误事件
- Javascript:在删除相关HTML时,我应该删除一个事件处理程序吗
- 我应该为onchange表单提交什么Meteor事件处理程序
- 我应该在等待事件启动时明确创建一个承诺吗
- 我应该在React JS中使用自定义事件委派吗
- 我应该将.on('click')事件附加到文档或元素吗
- 我应该如何将事件绑定到使用JsBinder自定义标记创建的DOM元素
- 我应该在哪里添加JS事件,使我的链接工作
- 我应该如何改变一个变量为下一个兄弟点击事件与jquery