The latest front-end interview experience--around setTimeout

This article mainly shares with you a front-end interview experience centered around setTimeout. It is an interesting front-end development test question centered around setTimeout. It examines for loop and timersetTimeout(), JavaScript Closure, Anonymous function and Promise, etc. If you are not careful, you may make mistakes. Come and see if you have mastered the above knowledge. .

Preface

Front-end, a popular field in recent years, has a particularly strong atmosphere of making trouble. My friend Xiaowei was doing a crazy interview recently and met There are many interesting interviewers and interesting interview questions. Let me help this troublemaker explain them.

The details are as follows:

The following is the story of a friend of mine, it is really not me.

for (var i = 0; i < 5; i++) {
 console.log(i);
}

"Xiaowei, tell me what these lines of code will output?"

When the interviewer types these lines in Sublime When coding, I was a bit confused. Clam? Isn't this the simplest loop? Is there a trap? I thought about it. This seems to be very similar to the closure question I saw. Did the interviewer not finish writing it? It's poisonous.

"It should output 0 to 4 directly...", I said weakly.

"Yes, don't be nervous. There are no traps in this question. I just write it casually."

(Excuse me? Interviewer, are you here to be funny? I'm scared to death! )

"Then are you looking at what these lines of code will output?"

for (var i = 0; i < 5; i++) {
 setTimeout(function() {
 console.log(i);
 }, 1000 * i);
}

Um, what the hell, why didn't I just memorize it? Let me think about that closure question that has been repeated so many times. setTimeout will delay execution, so when console.log is executed, i has actually become 5. Yes, that's it. How can it be so difficult for me to do something so simple?

"It should start to output a 5, and then output a 5 every second, a total of 5 5s."

"Yes, how should it be changed to output 0 to 4? "

Finally I'm familiar with it. Just add a closure and it's solved. It's stable!

for (var i = 0; i < 5; i++) {
 (function(i) {
 setTimeout(function() {
  console.log(i);
 }, i * 1000);
 })(i);
}

"Very good, can you tell me what will happen if I delete this i?"

for (var i = 0; i < 5; i++) {
 (function() {
 setTimeout(function() {
  console.log(i);
 }, i * 1000);
 })(i);
}

"In this case, there is actually no internal reference to i , and it will actually become the output 5."

"Very good, then I will change it for you and you can take a look. What will be output? "

##

for (var i = 0; i < 5; i++) {
 setTimeout((function(i) {
 console.log(i);
 })(i), i * 1000);
}

Huh? What the hell, what is going on, let me think about it. Here an immediate execution function is passed to setTimeout. Well, setTimeout can accept functions or

strings as parameters, so what is the immediate execution function here? It should be undefined, which is equivalent to:

setTimeout(undefined, ...);

The immediate execution function will be executed immediately, so it should be output immediately.

"It should output 0 to 4 immediately."

"Oh, not bad. The last question, do you know Promise?"

"It's okay. ..."

"OK, then try this question."

##

setTimeout(function() {
 console.log(1)
}, 0);
new Promise(function executor(resolve) {
 console.log(2);
 for( var i=0 ; i<10000 ; i++ ) {
 i == 9999 && resolve();
 }
 console.log(3);
}).then(function() {
 console.log(4);
});
console.log(5);

WTF! ! ! ! I want to be quiet!

This question should examine the running mechanism of my JavaScript. Let me sort out my thoughts.

First encounter a setTimeout, so a timing will be set first. After the timing ends, the function will be passed and placed in the task queue, so 1 will definitely not be output at the beginning.

Then there is a Promise, the function inside is executed directly, so it should output 2 3 directly.

Then, Promise's then should be placed at the end of the current tick, but still in the current tick.

Therefore, 5 should be output first, and then 4.

Finally, the next tick is 1.

“2 3 5 4 1”

“Okay, let’s wait for the next round of interviews.”

So easy! Mom no longer has to worry about my interviews.

The above is the detailed content of The latest front-end interview experience--around setTimeout. For more information, please follow other related articles on the PHP Chinese website!