Dojo：使用 setTimeout + Deferred 的异步调用 --> 不工作

Question

假设页面上有一个 Dashboard 和一些 Items。当页面加载时，e 想这样处理：

加载并渲染 Dashboard。
使用异步调用 (dojo.Deferred + setTimeout) 加载所有 Items.
将 Items 添加到 Dashboard。

加载 Item 后，我们将其添加到 Dashboard。在此异步加载期间，我们希望页面可用于交互（UI-线程未冻结）。

代码大概应该是这样的：

var deferred = new Deffered();

setTimeout(function() {
  array.forEach(items, function(item, i) {
    loadItem();

    deferred.progress(i + ' - loaded');
  });
  deferred.resolve();
}, 0)

deferred.then(function() {
  addItemsToDashboard();  
}, function(err) {
}, function(progress) {
  console.debug('Update:', progress);
});

然而，这并没有像预期的那样工作。页面 在整个 Items 加载期间冻结。

有什么问题或如何处理的建议吗？

Answer 1

解决方案是将 setTimeout 与递归函数一起使用，如下所示：

var counter = 0;

recursiveFunc: function(element) {
  setTimeout(function() {
    // Do stuff for element[counter]

    if (++counter < numberOfElements) {
      recursiveFunc(element);
    }
  }, 0);
}

recursiveFunc(element[counter])

UI 线程仍然会有错误，但至少它没有被冻结。该解决方案被选为快速解决方案。对于长期的，决定优化代码以摆脱同步 XHR 请求。

Dojo：使用 setTimeout + Deferred 的异步调用 --> 不工作

Dojo: async call with setTimeout + Deferred --> not working

javascript

dojo

asynchronous

deferred