title: Dojo: async call with setTimeout + Deferred --> not working
body: <p>Imagine there is a <code>Dashboard</code> with some <code>Items</code> on the page. When page loads, e would like to handle it like this:</p>
  
  <ol>
  <li>Load and render the <code>Dashboard</code>.</li>
  <li>Use async call (<code>dojo.Deferred</code> + <code>setTimeout</code>) to load all <code>Items</code>.</li>
  <li>Add <code>Items</code> to the <code>Dashboard</code>.</li>
  </ol>
  
  <p>Once an <code>Item</code> has been loaded, we add it to the <code>Dashboard</code>. During this async load we want the page to be available for interaction (UI-thread is not frozen).</p>
  
  <p>The code should probably look like this:</p>
  
  <pre><code>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);
  });
  </code></pre>
  
  <p>However this doesn't work as expected. The page <strong>got frozen</strong> for the whole duration of <code>Items</code> to load.</p>
  
  <p>Any suggestion what is wrong or how to handle this?</p>