填充某些属性的javascript异步调用

Question

我有一个javascript对象,其中包含一些图像字符串作为其属性.在实例化此对象时,将立即进行AJAX调用以填充此属性.

我的视图函数同时尝试读取新实例化的实例并尝试显示此对象.正如预期的那样,AJAX调用可能尚未完成,因此它将无法读取正确的图像URL.

这个问题的一个解决方案是使用AJAX调用传递一些回调函数,该函数在完成时修改图像源,但这引入了对模型和视图的大量依赖,并且我试图保持我的MVC为尽可能分开,所以我的视图函数现在只需将该对象作为参数,读取所有属性并显示它.

使AJAX同步不是一个选项,因为我有很多这些对象被初始化,并且一次只显示一个,因此使所有AJAX调用同步将是太昂贵的权衡.

什么是解决这个问题的好方法？视图函数的形式为:

function displayObj(object) {
    var prop1 = object.getProp1();
    // this could be the image file that depends on AJAX result
    var prop2 = object.getProp2(); 
}

理想情况下,我想将此任务委托给getter,以便视图函数不必担心对象的间隔状态.getter可以通过检查图像是否存在来处理这个问题,如果没有,则等待,然后仅在实际图像字符串存在时才返回.但是,阻塞等待肯定会阻止AJAX进程,因此它是一个死锁,非阻塞等待将让getter返回,而view函数将获得null数据.

请详细说明这种情况或建议我可以组织代码的其他方法.非常感谢你!

Answer 1

我对 MVC 角色不太严格，让模型对象返回 DOM<img>对象。

// model object starts loading upon instantiation
var loader = new Loader();

// however the img tag is available immediately.
// the loader will update the src when ajax
// calls complete.
document.body.appendChild(loader.getImg());