0

[EDIT BELOW]

Here is the current code:

for(toy of toys) {
    fetch(url, {headers: headers})
       .then((response) => response.json)
       .then((responseJson) => {
           <insert toy to database>
       })
}

The code above does not post toy properly because the loop completes before the fetch inside does. How do I implement this properly so that I can insert toys with responseJson properties to the database properly? In other words, how can I wait for the fetch to complete before proceeding with the loop?

[PREVIOUS POST]

I have the following code:

function hello(callback1) {
   for(var i = 0; i <= 100; i++){
       console.log(i)
   }

   callback1()
}

function callback1() {
   console.log("hello")
}

My question is, will callback1 wait for the loop to finish or not?

Here is a second scenario:

function hello() {
   for(var i = 0; i < 100; i++){
      console.log("apples")
   }

   for(var i = 0; i < 100; i++){
      console.log("peaches")
   }
}

Will the output be:

apples
apples
apples
apples
...
peaches
peaches
peaches
...

or

apples
apples
peaches
apples
peaches
...(in any order since they execute at the same time)

I'm having a hard time understanding the flow of react native programs as I am used to linear execution of codes. If you can also suggest readings for dummies, that would be great.

Maiko Francisco Rugeria
  • 107
  • 1
  • 9
  • what is stopping you from just testing this code? Or if you have tested it how where the results different from what you expected? (Also what makes you think that these functions will not be executed sequentially?) – UnholySheep Jul 19 '17 at 16:53
  • Yeah, why not try this out? There's Javascript workbenches on the web for testing this kind of code right away in the browser. All the stuff you are showing here is pretty straightforward though, nothing asynchronous there. Some more complex examples e.g. here https://stackoverflow.com/questions/16336367/what-is-the-difference-between-synchronous-and-asynchronous-programming-in-node – Pekka Jul 19 '17 at 16:54
  • Thanks for answering! I'm executing some similar code but I'm not getting the results I expect. The code seems to be executing the loops at the same time. I think that the functions will not execute sequentially because of the javascript is asynchronous. Never really understood that concept fully. – Maiko Francisco Rugeria Jul 20 '17 at 02:12
  • So asynchronous only apply to functions? For example: function1() function2() function3() may produce results that may vary in order, depending on which finishes first? Thanks! – Maiko Francisco Rugeria Jul 20 '17 at 02:23
  • Hi! I found my real problem. Please see the edits on the post. Thanks! – Maiko Francisco Rugeria Jul 20 '17 at 03:56

2 Answers2

1

As mention in the MDN documentation, the syntax of a for loop is:

for ([initialization]; [condition]; [final-expression])
    statement

Where statement is:

A statement that is executed as long as the condition evaluates to true. To execute multiple statements within the loop, use a block statement ({ ... }) to group those statements. To execute no statement within the loop, use an empty statement (;).

This means that everything in the for loop will be executed before executing the following code.

function hello(callback1) {
   for(var i = 0; i <= 10; i++){
       console.log(i)
   }

   callback1()
}

function callback1() {
   console.log("hello")
}

hello(callback1);
Erazihel
  • 7,295
  • 6
  • 30
  • 53
0

I found the answer in this post:

How to make a javascript FOR LOOP wait for certain conditions before looping

In these situations, recursion is more appropriate to use.

Erazihel
  • 7,295
  • 6
  • 30
  • 53
Maiko Francisco Rugeria
  • 107
  • 1
  • 9