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输出几个'itemname被视为'消息'。

任何人都可以帮我弄清楚如何正确地写这个，以便显示所有树的元素吗？不知怎的，我的IIFE还不够。

Answer 1

我认为您的问题是所有延迟的功能都会同时执行。

如果您有n个孩子，那么在1500毫秒之后，您将有n个非常接近的呼叫。其他setTimeout次调用具有相同的行为。

实际上，最后一个元素才有效。

如何评估包含数组中每个项目的settimeout的函数（Javascript）

1 个答案: