For loop + settimeout in the front interview question

JS Timer pen TestAnalyze the results of the following code actually running:

for (var i = 0; i < 5; i++) {
 settimeout (function () {
  console.log (new Date, i);
 }, 1000);
}
Console.log (new Date, i);

JS Synchronous and asynchronous code differences, variable scope, closures and other concepts have a correct understanding, you should know the output of the above code:

Tue Mar 2018 10:10:26 GMT + 0800 (China Standard Time) 5
Tue Mar 2018 10:10:27 GMT + 0800 (China Standard Time) 5
Tue Mar 06 2018 10 : 10:27 GMT + 0800 (China Standard Time) 5
Tue Mar 2018 10:10:27 GMT + 0800 (China Standard Time) 5
Tue Mar 2018 10:10:27 GMT + 080 0 (China Standard Time) 5
Tue Mar 2018 10:10:27 GMT + 0800 (China Standard Time) 5

If you want to output a number at 1s intervals, modify the following

for (var i = 0; i < 5; i++) {
    settimeout (function () {
        console.log (new Date (), i)
    }, I * 1000)//Here's the 1000 change
to i*1000}
console.log (new Date (), i);

The results of the output are as follows

Tue Mar 2018 12:20:28 gmt+0800 (China Standard Time) 5
Tue Mar-2018 12:20:28 gmt+0800 (China Standard Time) 5
Tue Mar 06 2018 12:20:29 GMT+0800 (China Standard Time) 5
Tue-2018 12:20:30 gmt+0800 (China Standard Time) 5
Tue Mar 2018 12:20:31 gmt+0800 (China Standard Time) 5
  
   tue Mar 2018 12:20:32 gmt+0800 (China Standard Time) 5
  

If you want to output different numbers, you need to use the closure, where you use the self execution function, or you can use let instead of VAR declaration i

for (var i = 0; i < 5; i++) {
    (j => {
        settimeout (function () {
            console.log (new Date, J)
        }, J * 1000) c9/>}) (i) 
}
console.log (new Date,i)

Enter the results as follows

Tue Mar 2018 12:54:46 gmt+0800 (China Standard Time) 5
Tue Mar-2018 12:54:46 gmt+0800 (China Standard Time) 0
Tue Mar 06 2018 12:54: GMT+0800 (China Standard Time) 1
Tue Mar 2018 12:54:48 gmt+0800 (China Standard Time) 2
Tue Mar 2018 12:54:49 gmt+0800 (China Standard Time) 3
Tue Mar 2018 12:54:50 gmt+0800 (China Standard Time) 4

Using the generator function

The generator function is an asynchronous programming solution provided by ES6.

The For...of loop can automatically traverse the iterator object that is generated when the generator function is called, and the next method is no longer required.

function* foo () {for
    (let i = 0; i < 5; i++) {
        yield i;
    }
    return 6;
}
for (Let J. Foo ()) {
    settimeout () => {
        console.log (new Date, J)
    }, J * 1000)
}

Output is as follows

Tue Mar 2018 13:41:39 gmt+0800 (China Standard Time) 0
Tue Mar-2018 13:41:40 gmt+0800 (China Standard Time) 1
Tue Mar 06 2018 13:41: GMT+0800 (China Standard Time) 2
Tue Mar 2018 13:41:42 gmt+0800 (China Standard Time) 3
Tue Mar 2018 13:41:43 gmt+0800 (China Standard Time) 4

Using the async function in ES7

The async function replaces the asterisk (*) of the generator function with the async and replaces the yield with await.

The async function returns a Promise object that you can use to add a callback function using the then method. When a function executes, it returns first when it encounters a await, waits until the asynchronous operation completes, and then executes the statement following the function body.

Simulating sleep in other languages can actually be any asynchronous operation const sleep
= (TIMEOUNTMS) => new Promise ((resolve) => {
    settimeout (resolve , TIMEOUNTMS);
};

(Async () => {//Declaration is executed async function expression for
    (var i = 0; i < 5; i++) {await sleep
        (1000);
        Console.log (new Date, i);
    }
    Await sleep (1000);
    Console.log (new Date, i);
}) ();

Output is as follows

Tue Mar 2018 13:52:22 gmt+0800 (China Standard Time) 0
Tue Mar-2018 13:52:23 gmt+0800 (China Standard Time) 1
Tue Mar 06 2018 13:52: GMT+0800 (China Standard Time) 2
Tue Mar 2018 13:52:25 gmt+0800 (China Standard Time) 3
Tue Mar 2018 13:52:26 gmt+0800 (China Standard Time) 4
Tue Mar 2018 13:52:27 gmt+0800 (China Standard Time) 5

Using Promise

function delay (time) {return
    to new Promise (function (resolve, reject) {
        settimeout (resolve, time);
    })
} For
(Let i = 0; i < 5; i++) {
    delay (i * 1000). Then (() => Console.log (new Date, i)
}

Output is as follows

Fri 2018 09:57:04 gmt+0800 (China Standard Time) 0
Fri Mar 2018 09:57:05 gmt+0800 (China Standard Time) 1
Fri Mar 16 2018 09:57:06 GMT+0800 (China Standard Time) 2
Fri 2018 09:57:07 gmt+0800 (China Standard Time) 3
Fri Mar 2018 09:57:08 gmt+0800 (China Standard Time) 4