[HTML/CSS/JS] SetTimeout๊ณผ ๋น„๋™๊ธฐ

SetTimeout๊ณผ ๋น„๋™๊ธฐ

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์˜ ์ „์—ญ ๊ฐ์ฒด์ธ window์˜ SetTimeout์„ ์‚ฌ์šฉํ•˜๋ฉด ๋น„๋™๊ธฐ์ ์ธ ์‹คํ–‰ ์ˆœ์„œ๋ฅผ ํ™•์ธํ•  ์ˆ˜ ์žˆ๋‹ค.

setTimeout

window.setTimeout();
setTimeout();

window๋Š” ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์˜ ์ „์—ญ ๊ฐ์ฒด์ด๋ฏ€๋กœ, ์ƒ๋žต์ด ๊ฐ€๋Šฅํ•˜๋‹ค.
setTimeout์€ ๋‘ ๊ฐœ์˜ ์ธ์ž๋ฅผ ๋ฐ›๋Š”๋‹ค.
์ฒซ ๋ฒˆ์งธ ์ธ์ž๋Š” ํ•จ์ˆ˜,
๋‘ ๋ฒˆ์งธ๋Š” setTimeout์ด ํ˜ธ์ถœ๋˜๊ณ  ๋‚œ ์ดํ›„ ์ฒซ ๋ฒˆ์งธ ์ธ์ž๋กœ ๋ฐ›์€ ํ•จ์ˆ˜๊ฐ€ ์‹คํ–‰๋  ์‹œ๊ฐ„(๋ฐ€๋ฆฌ ์„ธ์ปจ๋“œ)๋ฅผ ๋ฐ›๋Š”๋‹ค.

๋น„๋™๊ธฐ์  ์‹คํ–‰

function innerFunc() {
  console.log("innerFunc ์‹คํ–‰");
}

console.log("ํ”„๋กœ๊ทธ๋žจ ์‹คํ–‰");
setTimeout(innerFunc, 2000);
console.log("ํ”„๋กœ๊ทธ๋žจ ์ข…๋ฃŒ");

๊ฐ„๋‹จํ•œ ํ•จ์ˆ˜๋ฅผ ๋งŒ๋“ค๊ณ , setTimeout ์•ˆ์— ํ•จ์ˆ˜์™€ ์‹œ๊ฐ„์„ 2์ดˆ๋กœ ์„ค์ •ํ–ˆ๋‹ค.
๋™๊ธฐ์ ์ธ ์‹คํ–‰ ๊ฒฐ๊ณผ๋ฅผ ์ƒ๊ฐํ•œ๋‹ค๋ฉด, โ€œํ”„๋กœ๊ทธ๋žจ ์‹คํ–‰โ€ ๋’ค 2์ดˆ ๋’ค์— โ€œinnerFunc ์‹คํ–‰โ€, ๊ทธ๋ฆฌ๊ณ  โ€œํ”„๋กœ๊ทธ๋žจ ์ข…๋ฃŒโ€๊ฐ€ ๋‚˜์˜ฌ ๊ฒƒ ๊ฐ™๋‹ค.
์‹คํ–‰ ๊ฒฐ๊ณผ๋ฅผ ํ™•์ธํ•ด๋ณด์ž.

ํ”„๋กœ๊ทธ๋žจ ์‹คํ–‰
ํ”„๋กœ๊ทธ๋žจ ์ข…๋ฃŒ
innerFunc ์‹คํ–‰

์ˆœ์ฐจ์ ์œผ๋กœ ์ง„ํ–‰๋  ๊ฒƒ ๊ฐ™์€ ์†Œ์Šค์™€๋Š” ๋‹ฌ๋ฆฌ, setTimeout์€ ๋น„๋™๊ธฐ์ ์ธ ์ˆœ์„œ๋กœ ์‹คํ–‰์„ ์ง€์›ํ•˜๊ธฐ ๋•Œ๋ฌธ์—,
ํ”„๋กœ๊ทธ๋žจ ์‹คํ–‰, ์ข…๋ฃŒ๊ฐ€ ๋จผ์ € ์ฝ˜์†”์— ๋‚˜ํƒ€๋‚˜๊ณ , 2์ดˆ ๋’ค innerFunc๊ฐ€ ์‹คํ–‰๋˜์—ˆ๋‹ค.

์Šคํƒ๊ณผ ์ด๋ฒคํŠธ ํ

function innerFunc() {
  console.log("innerFunc ์‹คํ–‰");
}

console.log("ํ”„๋กœ๊ทธ๋žจ ์‹คํ–‰");
setTimeout(innerFunc, 0);
console.log("ํ”„๋กœ๊ทธ๋žจ ์ข…๋ฃŒ");

๋งŒ์•ฝ ์œ„์ฒ˜๋Ÿผ ์‹œ๊ฐ„์„ 0์œผ๋กœ ๋ฐ”๊ฟ”๋„ innerFunc๊ฐ€ 2์ดˆ์—์„œ ๋Œ€๊ธฐ ์‹œ๊ฐ„์ด ์ค„์–ด๋“ค ๋ฟ, ์‹คํ–‰ ๊ฒฐ๊ณผ๋Š” ๋™์ผํ•˜๋‹ค.

๋น„๋™๊ธฐ ํ•จ์ˆ˜์˜ ๊ฒฝ์šฐ์—”, ์Šคํƒ์—์„œ ๋ฐ”๋กœ ์‹คํ–‰๋˜๋Š” ๊ฒƒ์ด ์•„๋‹ˆ๋ผ ์ด๋ฒคํŠธ ํ์— ๋ฏธ๋ฆฌ ์ €์žฅ์„ ํ•ด๋‘”๋‹ค.
์Šคํƒ์— ์Œ“์—ฌ์žˆ๋Š” ์ฝ”๋“œ๋“ค์ด ๋ชจ๋‘ ์‹คํ–‰๋œ ํ›„, ์ด๋ฒคํŠธ ํ์— ์žˆ๋Š” ๊ฒƒ๋“ค์„ ์ฒ˜๋ฆฌํ•˜๊ธฐ ๋•Œ๋ฌธ์—, 0์ดˆ ๋’ค ์‹คํ–‰์„ ํ•ด๋„ ๋น„๋™๊ธฐ์ ์œผ๋กœ ์ฒ˜๋ฆฌ๋˜๋Š” ๊ฒƒ์ด๋‹ค.

function innerFunc() {
  console.log("innerFunc ์‹คํ–‰");
}

function asyncTest() {
  console.log("asyncTest ์‹คํ–‰");
  setTimeout(innerFunc, 2000);
  // ์ด๋ฒคํŠธ ํ์— ์ €์žฅ
  console.log("asyncTest ์ข…๋ฃŒ");
}

console.log("ํ”„๋กœ๊ทธ๋žจ ์‹คํ–‰");
asyncTest();
console.log("ํ”„๋กœ๊ทธ๋žจ ์ข…๋ฃŒ");

์œ„์˜ ์ฝ”๋“œ๋„ ์‹คํ–‰ํ•ด๋ณด๋ฉด, setTimeout(innerFunc, 2000); ์™ธ ์—” ๋ชจ๋‘ ์Šคํƒ์—์„œ ๋ฐ”๋กœ ์‹คํ–‰๋˜๋ฏ€๋กœ,

ํ”„๋กœ๊ทธ๋žจ ์‹คํ–‰
asyncTest ์‹คํ–‰
asyncTest ์ข…๋ฃŒ
ํ”„๋กœ๊ทธ๋žจ ์ข…๋ฃŒ
innerFunc ์‹คํ–‰

์ด๋Ÿฌํ•œ ์‹คํ–‰ ๊ฒฐ๊ณผ๋ฅผ ํ™•์ธํ•  ์ˆ˜ ์žˆ๋‹ค.