최신 프런트엔드 인터뷰 경험 - setTimeout 관련

이 글은 주로 setTimeout을 중심으로 한 프론트엔드 인터뷰 경험을 공유합니다. setTimeout을 중심으로 한 흥미로운 프론트엔드 개발 테스트 질문입니다. for loop, timersetTimeout(), JavaScript 패키지를 살펴봅니다. , 익명 기능 및 Promise 등, 주의하지 않으면 실수할 수 있습니다. 위의 지식을 마스터했는지 확인해 보세요.

머리말

요즘 핫한 프론트엔드가 특히나 말썽꾸러기 분위기가 강해서 요즘 미친듯이 면접을 다니며 흥미로운 면접관들과 흥미로운 면접 질문들을 많이 만났어요. 이 소년을 돕기 위해 여기 왔습니다. 다른 말로 표현하겠습니다.

자세한 내용은 다음과 같습니다.

다음은 내 친구의 이야기입니다. 실제로는 제가 아닙니다.

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

"Xiaowei, 이 코드 줄이 무엇을 출력할지 말해 줄 수 있나요?"

면접관이 Sublime에서 이 코드 줄을 입력했을 때 저는 약간 혼란스러웠습니다. 대합? 이것이 가장 간단한 루프가 아닌가? 함정이 있는 걸까요? 제가 본 종결 질문과 매우 유사한 것 같습니다. 그것은 유독하다.

"0부터 4까지 직접 출력해야지..."라고 약하게 말했습니다.

"네, 긴장하지 마세요. 이 질문에는 함정이 없습니다. 그냥 아무렇지도 않게 씁니다."

(죄송해요? 면접관님 웃기려고 오신 건가요? 무서워 죽겠어요!)

"그럼 이 코드들이 어떻게 출력될지 보고 계시죠?"

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

음 대체 왜 내가 여러번 외웠던 종결 질문이 아닌가? setTimeout은 실행을 지연시키므로 console.log가 실행되면 실제로 5가 됩니다. 예, 그게 다입니다. 그렇게 간단한 일을 하는 것이 어떻게 그렇게 어려울 수 있습니까?

"5를 출력하기 시작하고 매초마다 5를 출력해야 합니다. 총 5 5s입니다."

"예, 0에서 4까지 출력할 수 있도록 어떻게 변경해야 합니까?

드디어 도착했습니다." 제가 잘 아는 것 예, 클로저만 추가하면 문제가 해결될 것입니다. 안정적입니다!

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

"좋습니다. 이 i를 삭제하면 어떻게 되는지 알려주실 수 있나요?"

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

"이 경우 내부적으로 i에 대한 참조가 실제로 없습니다. 실제로는 will 출력 5가 됩니다. "

"좋아요. 바꿔서 결과가 어떻게 나올지 볼까요?"

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

Clam? 도대체 무슨 일이 일어나고 있는 걸까요, 생각해 보도록 하겠습니다. 여기서는 즉시 실행 함수가 setTimeout에 전달됩니다. 음, setTimeout은 함수나 strings을 매개변수로 받을 수 있는데, 여기서 즉시 실행 함수는 무엇입니까? 정의되지 않아야 합니다. 이는 다음과 같습니다.

setTimeout(undefined, ...);

그리고 즉시 실행 함수는 즉시 실행되므로 다음과 같습니다. 즉시 출력됩니다.

"즉시 0~4가 출력되어야 합니다."

"아, 나쁘지 않군요, 마지막 질문입니다. Promise에 대해 아시나요?"

"괜찮습니다..."

"좋아요, 그럼 시도해 보세요. 질문 ”

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! ! ! ! 나는 조용히하고 싶다!

이 질문은 내 JavaScript의 실행 메커니즘을 조사해야 합니다.

처음에는 setTimeout이 발생하므로 타이머가 먼저 설정됩니다. 타이머가 끝난 후 함수가 전달되어 작업 대기열에 배치되므로 처음에는 1이 출력되지 않습니다.

그리고 Promise가 있는데, 내부 함수가 직접 실행되므로 2 3을 직접 출력해야 합니다.

그런 다음 Promise의 then은 현재 틱의 끝에 배치되어야 하지만 여전히 현재 틱에 있어야 합니다.

그러니까 5가 먼저 출력되고 그다음에 4가 출력되어야 합니다.

마지막으로 다음 틱은 1입니다.

"2 3 5 4 1"

"좋아, 다음 면접을 기다리자."

쉽죠! 엄마는 더 이상 내 인터뷰에 대해 걱정하지 않아도 됩니다.

위 내용은 최신 프런트엔드 인터뷰 경험 - setTimeout 관련의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!