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的异步调用 - ＆gt;不工作

1 个答案: