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

Question

我有一个 javascript 对象，其中包含一些图像字符串作为其属性。实例化此对象后，会立即进行 AJAX 调用以填充此属性。

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

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

使 AJAX 同步不是一个选项，因为我有相当多的这些对象正在初始化并且一次只会显示一个，因此使所有 AJAX 调用同步将是一个代价太大的权衡。

解决这个问题的好方法是什么？ View 函数的形式如下:

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

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

请阐明这种情况或建议我可以组织代码的替代方法。非常感谢!

Answer 1

我对 MVC Angular 色不那么严格，让模型对象返回 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());