javascript - 将 dojo/Deferred 与异步函数和查询结合使用

Question

我在获取一些查询和函数以正确的顺序运行时遇到问题。假设我有 2 个函数创建 2 个下拉菜单( dropdown_a 、 dropdown_b )。依次create_a(items)必须在 create_b(items) 之前首先调用。事实上，create_a(items)创建dropdown_a然后包含 on('change')触发的事件 function_b(items) ，进而创建 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);
        ...
    }
});

现在我想触发项目下拉菜单 on('change')基于 value 的事件。完成后，我想对子项目下拉列表执行相同的操作。像这样:

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)

我有点困惑如何应用这样的东西将这些东西链接在一起。关于如何在一般意义上进行设置有什么建议吗？

Answer 1

为了避免重新架构整个事情，您可以尝试使用 dojo/ready(有关文档，请参阅 here):

ready(function(){
    dijit.byId('projectSelect').set("value", info_proj_name);
    ready(function(){
        dijit.byId('subprojectSelect').set("value", subproj_name); 
    });
});

如果这不起作用，下一个可能性是 setTimeout:

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 顺序。