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

Posted 2023-02-22

【中文标题】如何为数组中的每个项目评估包含 settimeout 的函数（Javascript）

【英文标题】：How to evaluate a function containing settimeout for each item in an array (Javascript)

【发布时间】：2017-12-19 12:34:42

【问题描述】：

我对 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 还不够。

【问题讨论】：

与您的问题无关，但您的所有.bind(self) 调用都是多余的，因为您无论如何都不会在回调中访问this

@amiramw 整个函数是 self 引用的 Vue 对象上的一个方法。它似乎有效 - 或者 self.instruct 至少正在更新。

代码在没有绑定调用的情况下也可以工作。 self 取自作用域，bind 影响 this 的值。但是你根本不使用它，所以它是多余的。

@amiramw 如果没有绑定调用，它肯定是行不通的。该函数能够访问data.instruct，因为它获得了一个指向Vue 对象的指针以用作“this”（我已将其余代码添加到问题中，以便您查看）。我最初没有绑定调用，只是在看到这个答案后才添加它们，这使得代码工作***.com/questions/37465289/…

在这个答案中有一个用途。在您的代码中，我看不到这个的任何用途...

【参考方案1】：

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

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

实际上只有最后一个元素生效才有意义。

【讨论】：

但是至少不应该在等待之间执行最低级别吗？我尝试注释掉除了最后一个函数对 self.instructions 的更新之外的所有内容，它仍然只显示最后一项。

如果你想在中间等待，你应该尝试递归调用 setTimout。否则你会安排很多函数同时执行