我在让一些查询和函数以正确的顺序运行时遇到问题。假设我有 2 个函数来创建 2 个下拉列表(dropdown_a
、dropdown_b
)。按顺序create_a(items)
必须先调用create_b(items)
。实际上,create_a(items)
创建dropdown_a
,然后包含一个触发function_b(items)
的on('change')
事件,进而创建dropdown_b
。若要获取每个函数的参数items
,我首先必须查询REST
服务。如果不粘贴大量代码(它很大),工作流程将如下所示:
function create_a(items):
var projectNode = dom.byId("projectDropdown");
...
var projectSelector = new Select({
name: "projectSelect",
id: "projectSelect",
options: projectsOptions
}).placeAt(projectNode).startup();
dijit.byId('projectSelect').on('change', function (e) {
var subprojectQuery = new esriQuery();
... // creates a query to get subproject items
subprojectAccessQueryTask.execute(subprojectQuery,
function (results) {
let records = results.features;
createSubprojectDropdown(records); // calls the subproject function
},
function (error) {
console.log("query error: ", error);
}
}); // End of deferred Query Task for Project Name
});
}
function create_b(items) {
var subprojectNode = dom.byId("subprojectDropdown");
var p = registry.byId('subprojectSelect');
if (p) {
p.destroyRecursive();
}
var subprojectSelector = new Select({
name: "subprojectSelect",
id: "subprojectSelect",
options: subprojectsOptions
}).placeAt(subprojectNode).startup();
dijit.byId('subprojectSelect').on('change', function (e) {
thisWidget.loadData(e, proj_type_obj);
});
thisWidget.loadData();
}
// Query 1 - Projects
var queryTask_a = new QueryTask();
queryTask_a.execute(query_a_obj,
function (results) {
...
create_a(results);
...
}
});
// Query 2 Subprojects
var queryTask_b = new QueryTask();
queryTask_a.execute(query_a_obj,
function (results) {
...
create_b(results);
...
}
});
现在我想根据value
触发项目下拉列表on('change')
事件。完成后,我想对子项目下拉列表执行相同的操作。喜欢这个:
var info_proj_name = "project_a";
var subproj_name = "subproject_b"
dijit.byId('projectSelect').set("value", info_proj_name);
dijit.byId('subprojectSelect').set("value", subproj_name);
问题是,在这一点上,dijit.byId('projectSelect')
可能/可能不存在dom
,.set
可能/可能不是一个函数,等等......似乎如果我在Chrome Devtools
中像上面一样缓慢运行它,它可以工作,但是当我让应用程序按原样运行时,查询创建和填充下拉列表的时间以及调用dijit.byId('projectSelect').set("value", info_proj_name);
的时间似乎存在滞后。由于我已经在使用Dojo/Dijit
,因此我正在尝试应用promise/callback
功能(如Deferred
)按顺序运行所有内容:
1) query a (get list of items for project dropdown)
2) call create_a function (create project dropdown, trigger subproject process)
3) query b (get list of items for subproject dropdown)
4) call create_b function (create subproject dropdown)
5) select an option from projects dropdown (triggers subprojects query and subrprojects dropdown)
6) select and option from subprojects dropdown (triggers subprojects on(change) event)
我有点困惑如何应用这样的东西将这些东西链接在一起。关于如何在一般意义上进行设置的任何建议?
为了避免重新构建整个事情,你可以尝试使用 dojo/ready(请参阅此处以获取文档):
ready(function(){
dijit.byId('projectSelect').set("value", info_proj_name);
ready(function(){
dijit.byId('subprojectSelect').set("value", subproj_name);
});
});
如果这不起作用,则设置下一个可能性超时:
setTimeout(function(){
dijit.byId('projectSelect').set("value", info_proj_name);
setTimeout(function(){
dijit.byId('subprojectSelect').set("value", subproj_name);
}, timeout1);
}, timeout2);
然后对 Timeout1 和 Timeout2 进行猜测工作,如果这些语句需要等到服务器响应,请先交叉手指。
现在,重新架构当然会有所帮助。我将首先在 queryTask_a.execute 回调中移动对 queryTask_b.execute 的调用,并在 create_a 语句之后移动,该语句遵循上面的 1、2、3、4 顺序。