One interview experience on setTimeout front-end and one experience on settimeout

One interview experience on setTimeout front-end and one experience on settimeout

Preface

The frontend is a hot field in recent years, and the atmosphere is very strong. My friend Xiaowei has recently been in a crazy interview and has met many interesting interviewers and interesting interview questions, let me tell you something about it.

The details are as follows:

The following is a story from a friend of mine, not me.

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

"Xiaowei, what do you say these lines of code will output ?"

I was a little blind when the interviewer typed these lines of code in Sublime. Clams? Isn't this the simplest loop? Is there a trap? I think for a moment, it seems like the closure question I saw. Isn't the interviewer finished? Toxic.

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

"Yes, don't be nervous. There is no trap in this question. I just want to write it casually ."

(Excuse me? Interviewer: Are you funny? I am scared to death !)

"How many lines of code will you output ?"

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

Well, what the hell is it? Why isn't that closure question I 've carried back so many times? Let me think about it. SetTimeout will delay the execution, so when I is executed to console. log, I has actually changed to 5, right, that's it. How can it be difficult for me to implement this simple process.

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

"Yes, how can I output 0 to 4 ?"

Finally, I am familiar with it. I have to add a closure to solve the problem!

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

"That's good. Can you tell me what will happen when 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 no reference to I internally, but it will actually become output 5 ."

"That's good. Let me change it for you. What will it output ?"

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

Clams? What the hell is it, let me think about it. Here, an immediate execution function is passed to setTimeout. Yes, setTimeout can accept the function or string as the parameter. So what is the immediate execution of the function here? It should be undefined, that is, equivalent:

setTimeout(undefined, ...);

If the function is executed immediately, it should be output immediately.

"It should be to output 0 to 4 immediately ."

"Oh, good. Do you know Promise in the last question ?"

"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 JavaScript Running Mechanism and let me take a look.

First, a setTimeout is met, so a timer is set first. After the timer ends, the function is passed into the task queue, so 1 is certainly not output at the beginning.

Then there is a Promise, and the functions in it are directly executed. Therefore, 2 3 should be output directly.

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

Therefore, output 5 first and then 4.

Finally, the next tick is 1.

"2 3 5 4 1"

"Well, wait for the next round of interview ."

So easy! Mom no longer needs to worry about my interview.

Summary

The above is all the content of this article. I hope the content of this article will help you in your study or work. If you have any questions, please leave a message, thank you for your support.