How to evaluate a function containing settimeout for each item in an array (Javascript)

Question

I have a basic understanding of setTimeout and why it is necessary to use immediately invoked functions to do what it says in my questions title. My attempt doesn't accomplish what I'm trying to do, however. Self.instruct sets a reactive data element so that the message should be displayed to the screen. Only the last elements of each object-array end up being displayed.

    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)
     })
     })
     }
     }
 }

basically, val taken from the snapshot is a json tree structure 3 levels deep, each level containing a name and a children property.

The console.log outputs several 'itemname is being considered' messages at once when the program is finished running.

Can anyone help me figure out how to write this correctly so that all of the tree's elements are displayed? Somehow my IIFE's aren't enough.

Not relevant for your question, but all your .bind(self) calls are redundant as you don't access this in your callbacks anyway — amiramw
– amiramw, Commented Jul 14, 2017 at 12:20
@amiramw the whole function is a method on a Vue object that self is refering to. It seems to work -- or the self.instruct is being updated, at least. — David J.
– David J., Commented Jul 14, 2017 at 13:09
The code will work also without the bind calls. Self is taken from the scope, bind affect the value of this. But you don't use this at all so it is redundant. — amiramw
– amiramw, Commented Jul 14, 2017 at 13:25
@amiramw It definitely doesn't work without the bind calls. The function is able to access data.instruct because it gets a pointer to the Vue object to use as 'this' (I've added the rest of the code to the question so you can see). I originally had it without the bind calls, and only added them after seeing this answer, which made the code work stackoverflow.com/questions/37465289/… — David J.
– David J., Commented Jul 14, 2017 at 13:33
In this answer there is a use of this. In your code I don't see any use of this... — amiramw
– amiramw, Commented Jul 14, 2017 at 13:55

amiramw · Accepted Answer · 2017-07-14 12:26:54Z

1

I think your problem is that all your delayed functions are going to be executed at the same time.

If you have n children then after 1500 ms you are going to have n calls very close to one another. The other setTimeout calls has the same behavior.

It actually make sense that the last element only take effect.

answered Jul 14, 2017 at 12:26

amiramw

5162 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

David J. Over a year ago

But shouldn't at least the lowest level be executed with waits between? I tried it with commenting out everything except the last function's updates of self.instructions, and it still only dispays the last item.

amiramw Over a year ago

If you want wait betweens you should try recursively call setTimout. Otherwise you are scheduling a lot of functions to execute at the same time

Collectives™ on Stack Overflow

How to evaluate a function containing settimeout for each item in an array (Javascript)

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related