Javascript：遍歷列表的列表異步

Question

我想遍歷列表的JavaScript列表。

目標是將每個項目傳遞給一個函數並異步處理它 。但它不起作用：

var tree = function (data, callback) { 

    var data_position = 0; 

    var iterate = function() { 

     if (data_position<data.length) { 
      if (Array.isArray(data[data_position])) { 
       tree(data[data_position], callback); 
       // If I uncomment these it will show all items but not ordered 
       //data_position++; 
       //iterate(); 
      } else { 
       callback(data[data_position++], iterate); 
      } 
     } 
    } 

    iterate(); 
} 


tree([1, 2, [100, 200, 300], 3, 4, 5, 6, 7, 8, 9], function (item, iterate) { 
    setTimeout(function(){ 
     console.log('Item: ' + item); 
     iterate(); 
    }, 1000); 
}) 

代碼停在300而不是處理樹的其餘部分。

如果我取消註釋上述2行，我可以打印所有項目，但它們 不顯示有序。 我該如何解決這個問題？

Answer 1

該解決方案使用可選的第二個回調，讓孩子迭代函數tree信號父tree一旦孩子完成繼續運行。

它按預期運行，每次葉子元素迭代之間延遲1秒。

var tree = function (data, callback, done) { 
 
    var data_position = 0; 
 
    var iterate = function() { 
 
     if (data_position<data.length) { 
 
      if (Array.isArray(data[data_position])) { 
 
       tree(data[data_position++], callback, function() { iterate(); }); 
 
      } else { 
 
       callback(data[data_position++], iterate); 
 
      } 
 
     } else if (done) { 
 
      done(); 
 
     } 
 
    } 
 
    iterate(); 
 
}; 
 

 

 
tree([1, 2, [100, 200, 300], 3, 4, 5, 6, 7, 8, 9], function (item, iterate) { 
 
    setTimeout(function(){ 
 
     console.log('Item: ' + item); 
 
     iterate(); 
 
    }, 1000); 
 
});

Answer 2

這應該工作：

var tree = function (data, callback) { 
 

 
    var data_position = 0; 
 

 
    var iterate = function() { 
 

 
     if (data_position<data.length) { 
 
      if (Array.isArray(data[data_position])) { 
 
       tree(data[data_position], callback); 
 
      } 
 
      callback(data[data_position++], iterate); 
 
     } 
 
    } 
 

 
    iterate(); 
 
} 
 

 

 
tree([1, 2, [100, 200, 300], 3, 4, 5, 6, 7, 8, 9], function (item, iterate) { 
 
    setTimeout(function(){ 
 
     if(!Array.isArray(item)) console.log('Item: ' + item); 
 
     iterate(); 
 
    }, 1000); 
 
})