问题描述
我有一个在视图列表中执行 foreach 循环的函数,需要为循环中的每个视图发送 AJAX 请求。当它在成功函数中获得结果时,它会检查是否返回了特定的 Id,如果是,则将此视图添加到 selectBox。问题是,当我尝试在 selectBox 上定义 .change 事件时,它给了我一个错误,因为没有添加任何选项。我曾考虑过添加 ajaxStop,但我还有其他不同的 AJAX 请求。 有谁知道我怎么能等到那些 Ajax 请求完成,但没有其他请求?
var newdiv = $('<div id="viewListDiv" style ="margin:auto" ></div> ')
var selectBox = $('<select id = "ViewsList" class="form-control" style="width:250px;margin-left: 70px; margin-rigth:70px;" ></select>');
views.forEach(function (view)
{
_this.continue = true;
var guid = view.search({ "type": "resource" })[0].data.guid;
jQuery.ajax({
url: "api/forge/modelderivative/Metadata/model",data: {
"urn": urn,"viewableId": guid,},success: function (Metadata) {
_this.getIds(Metadata.data);
if (_this.listdbId.includes(dbId[0])) {
var newOpt = new Option(view.data.viewableID,view.data.name);
selectBox.append(newOpt);
}
_this.listdbId = []
}
});
});
selectBox = selectBox[0];
selectBox.change(function (opt) {
//launch change function
});
解决方法
它看起来更像是一个纯 Javascript 问题,而不是 Autodesk Forge Viewer。无论如何,无论您选择使用 fetch
还是 jquery.ajax
,AJAX 调用都是异步作业。我们需要利用 Promise 来确保调用完成。这是您的代码片段的修订版:
const getModel = (view) => {
return new Promise((resolve,reject) => {
let guid = view.search({ "type": "resource" })[0].data.guid;
jQuery.ajax({
url: "api/forge/modelderivative/metadata/model",data: {
"urn": urn,"viewableId": guid,},success: function (metadata) {
resolve(metadata);
}
}).fail((jqXHR,textStatus) => reject(jqXHR,textStatus));
});
};
const tasks = views.map((view) => getModel(view));
const results = await Promise.all(tasks);
for(let i=0; i<results.length; i++) {
let metadata = results[i];
//..
}