如何為數組中的每個項目求值包含settimeout的函數（JavaScript）

Question

我對setTimeout有基本的了解，為什么有必要使用立即調用的函數來執行其在我的問題標題中所說的內容。 但是，我的嘗試無法完成我想要做的事情。 Self.instruct設置反應性數據元素，以便將消息顯示在屏幕上。 最終僅顯示每個對象數組的最后一個元素。

    export default {
         name: 'hello',
         props: ['tolearn'],
         data () {
         return {
             message: 'Welcome to Your Vue.js App',
             toLearn: {},
             instruct: ''
         }
         },
         methods: {
    showSlow: function(){
         var self = this;
         categoriesRef.once('value', function(snapshot){
         var val = snapshot.val();
         var sysName = val.name;
         var sysChildren = val.children;
         console.log(Object.keys(val.children) + " are the aspect names")

         sysChildren.forEach(function(aspect){
             (function(aspect){
             //self.instruct = aspect.name + ' is one aspect of ' + sysName + '.';         
             setTimeout(function(){
                 aspect.children.forEach(function(group){

                 (function(group){

                     //self.instruct = aspect.name + ' contains the group ' + group.name + '.';
                     setTimeout(function(){
                     group.children.forEach(function(item){

                         (function(item){
                         console.log(item.name + ' is being considered')


   self.instruct = group.name + ' contains the item ' + item.name + '.';
                     setTimeout(function(){
                         self.instruct = '';
                     }.bind(self), 800)
                     })(item)                        
                 })                          
                 }.bind(self), 100)
             })(group)               
             })                      
         }.bind(self), 1500)
         })(aspect)
     })
     })
     }
     }
 }

基本上，從快照中獲取的val是3個層次的json樹結構，每個層次包含一個name和children屬性。

當程序完成運行時， console.log輸出多個“正在考慮項名稱”消息。

誰能幫助我弄清楚如何正確編寫此內容，以便顯示樹的所有元素？ 不知何故，我的IIFE還不夠。

Answer 1

我認為您的問題是所有延遲的功能都將同時執行。

如果您有n個孩子，則在1500毫秒后，您將有n個彼此非常接近的呼叫。 其他setTimeout調用具有相同的行為。

實際上，最后一個元素僅會生效。