Created
May 22, 2018 13:06
-
-
Save hai5nguy/44d77323dc60c5471c1646888c66a89e to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| const arr = [10, 12, 15, 21]; | |
| for (let i = 0; i < arr.length; i++) { | |
| setTimeout(function() { | |
| console.log('The index of this number is: ' + i); | |
| }, 3000); | |
| } | |
| ///////////////////////////////// | |
| // example with the let keyword | |
| ///////////////////////////////// | |
| // the following is how a computer will run the above for loop | |
| // run 1: | |
| // set i = 0, check 0 < 4, run loop | |
| // call setTimeout and put this callback in the timing queue: | |
| // timing queue: | |
| // 0: function () { console.log('the index is 0) } <- run this after 3 seconds from now (LIKE RIGHT NOW! LIKE GET THE TIMESTAMP RIGHT NOW) | |
| // run 2: | |
| // set i = 1, check 1 < 4, run loop | |
| // call setTimeout and put this callback in the timing queue: | |
| // timing queue: | |
| // 0: function () { console.log('the index is 0) } | |
| // 1: function () { console.log('the index is 1) } <- run this after 3 seconds from now (LIKE RIGHT NOW! LIKE GET THE TIMESTAMP RIGHT NOW) | |
| // run 3: | |
| // set i = 2, check 2 < 4, run loop | |
| // call setTimeout and put this callback in the timing queue: | |
| // timing queue: | |
| // 0: function () { console.log('the index is 0) } | |
| // 1: function () { console.log('the index is 1) } | |
| // 2: function () { console.log('the index is 2) } <- run this after 3 seconds from now (LIKE RIGHT NOW! LIKE GET THE TIMESTAMP RIGHT NOW) | |
| // run 4: | |
| // set i = 3, check 3 < 4, run loop | |
| // call setTimeout and put this callback in the timing queue: | |
| // timing queue: | |
| // 0: function () { console.log('the index is 0) } | |
| // 1: function () { console.log('the index is 1) } | |
| // 2: function () { console.log('the index is 2) } | |
| // 3: function () { console.log('the index is 3) } <- run this after 3 seconds from now (LIKE RIGHT NOW! LIKE GET THE TIMESTAMP RIGHT NOW) | |
| // run 4: | |
| // set i = 4, check 4 < 4, EXIT loop | |
| // exit the entire function. | |
| // ... DO OTHER STUFF (JAVASCRIPT IS ALL ABOUT NON-BLOCKING AND ASYNC), like render this, run other functions, listen for user events, clicks, blah blah blah, and also: | |
| // CHECK THE TIMING QUEUE! | |
| // go through the timing queue: | |
| // for each item, if (CURRENT_TIME - SET_TIME > INTERVAL), CURRENT_TIME = (new Date()).getTime(); | |
| // SET_TIME = the timestamp when you called setTimeout() | |
| // INTERVAL = the interval you gave setTimeout(fn, interval) = 3000 milliseconds | |
| // run the item/function! | |
| // so finally after 3 sec, you have: | |
| // item 0: | |
| // log 'the index is 0' | |
| // item 1: | |
| // log 'the index is 1' | |
| // item 2: | |
| // log 'the index is 2' | |
| // item 3: | |
| // log 'the index is 3' |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment