如何计算包含数组中每个项的settimeout的函数（Javascript）

我对setTimeout有一个基本的了解，以及为什么有必要使用立即调用的函数来执行我的问题标题中所说的操作。然而，我的尝试并没有达到我的目的<代码>自我指示设置一个反应式数据元素，以便将消息显示在屏幕上。最后只显示每个对象数组的最后一个元素

    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

是一个三层深的json树结构，每个层包含一个

name

和一个

children

属性

当程序完成运行时，

console.log

一次输出几个“itemname正在考虑中”消息

---

有谁能帮我弄清楚如何正确地写这篇文章，以便显示树的所有元素吗？不知何故，我的生命是不够的。

我想你的问题是，所有延迟的函数都将同时执行

如果你有n个孩子，那么1500毫秒后，你将有n个电话彼此非常接近。其他

setTimeout

调用具有相同的行为

---

实际上，最后一个元素只起作用是有道理的。

与您的问题无关，但是您的所有

.bind（self）

调用都是多余的，因为您在回调中不访问

此

anyway@amiramw整个函数是self引用的Vue对象上的一个方法。它似乎可以工作——或者至少self.instruction正在更新中。代码在没有bind调用的情况下也可以工作。Self是从作用域中提取的，绑定会影响此值。但是您根本不使用它，所以它是多余的。@amiramw如果没有绑定调用，它肯定无法工作。该函数能够访问

数据。指示
，因为它获得一个指向Vue对象的指针，用作“this”（我已将其余代码添加到问题中，以便您可以看到）。我最初没有使用bind调用，只是在看到这个答案后才添加了它们，这使得代码在这个答案中工作，这是它的一个用途。在您的代码中，我看不到这有任何用处……但是，是否至少应该在等待之间执行最低级别？我试着注释掉除了最后一个函数对self.instructions的更新之外的所有内容，它仍然只显示最后一项。如果你想在中间等待，你应该尝试递归调用setTimout。否则，您将安排许多函数同时执行