--- id: javascript-async-timeouts title: "JavaScript Async Timeouts" category: "Frontend" status: "draft" verification_status: "conceptual" canonical_id: "" aliases: ["setTimeout", "setInterval", "JS timers", "Timeout scheduling", "Delayed execution"] duplicate_of: "" source_trust_level: "B" confidence_score: 0.9 created_at: 2026-06-23 updated_at: 2026-06-23 review_reason: "" merge_history: [] tags: ["javascript", "js", "web", "frontend", "w3schools", "settimeout", "setinterval", "timers"] raw_sources: ["https://www.w3schools.com/js/js_async_timeouts.asp"] applied_in: [] github_commit: "" --- # [[JavaScript Async Timeouts]] ## 🎯 ν•œ 쀄 톡찰 (One-line insight) `setTimeout()` schedules a function to run after a delay in milliseconds, and `setInterval()` repeats it every interval β€” both delay execution without freezing the browser. [S1] ## 🧠 핡심 κ°œλ… (Core concepts) - **setTimeout schedules once** β€” `setTimeout()` schedules a function to run after a delay in milliseconds; it is an async operation used to delay code execution without freezing the browser. [S1] - **setInterval repeats** β€” with `setInterval()` you specify a function to be executed for each interval. [S1] - **Pass the function, not its call** β€” when passing a function as an argument, do not use parentheses; `setTimeout(myFunction, 3000)` is right, `setTimeout(myFunction(), 3000)` is wrong. [S1] - **Timeouts lead into callbacks** β€” a callback runs after another function finishes, and callbacks were the first solution for asynchronous JavaScript. [S1] ## 🧩 μΆ”μΆœλœ νŒ¨ν„΄ (Extracted patterns) - **Named-callback scheduling** β€” `setTimeout(myFunction, ms)` defers a named function. [S1] - **Anonymous wrapper for arguments** β€” wrap the call in an anonymous function, `setTimeout(function(){ myFunction("...") }, ms)`, when you need to pass arguments. [S1] - **Repeating clock with setInterval** β€” `setInterval(fn, ms)` re-runs a function on a fixed cadence (e.g. a live clock). [S1] ## πŸ“– μ„ΈλΆ€ λ‚΄μš© (Details) **The setTimeout() method** The `setTimeout()` method schedules a function to run after a delay in milliseconds. It is an async operation used to delay code execution without freezing the browser. [S1] ```javascript setTimeout(myFunction, 3000); function myFunction() { document.getElementById("demo").innerHTML = "I love You !!"; } ``` In the example above, `myFunction` is passed to `setTimeout()` as an argument. `3000` is the number of milliseconds before `myFunction` will be called. When you pass a function as an argument, remember not to use parenthesis. [S1] **Passing arguments with an anonymous function** [S1] ```javascript setTimeout(function() { myFunction("I love You !!!"); }, 3000); function myFunction(value) { document.getElementById("demo").innerHTML = value; } ``` **The setInterval() method** When using the `setInterval()` method, you can specify a function to be executed for each interval. In the example below, `myFunction` is passed to `setInterval()` as an argument and `1000` is the number of milliseconds between every time `myFunction` will be called. [S1] ```javascript setInterval(myFunction, 1000); function myFunction() { let d = new Date(); document.getElementById("demo").innerHTML= d.getHours() + ":" + d.getMinutes() + ":" + d.getSeconds(); } ``` **Note (right vs wrong):** [S1] - Right: `setTimeout(myFunction, 3000);` - Wrong: `setTimeout(myFunction(), 3000);` **Next step** A callback runs after another function finishes. Callbacks were the first solution for asynchronous JavaScript. [S1] ## πŸ› οΈ 적용 사둀 (Applied in summary) The page's snippets β€” deferring a message with `setTimeout`, passing an argument via an anonymous wrapper, and a live clock with `setInterval` β€” are the canonical applied examples. No external project/commit applications found in the source. ## πŸ’» μ½”λ“œ νŒ¨ν„΄ (Code patterns) Schedule a named function once (language: JavaScript): ```javascript setTimeout(myFunction, 3000); function myFunction() { document.getElementById("demo").innerHTML = "I love You !!"; } ``` Pass an argument via an anonymous wrapper: ```javascript setTimeout(function() { myFunction("I love You !!!"); }, 3000); ``` Repeat every interval: ```javascript setInterval(myFunction, 1000); ``` ## βš–οΈ λͺ¨μˆœ 및 μ—…λ°μ΄νŠΈ (Contradictions & updates) No contradictions found in the source. ## βœ… 검증 μƒνƒœ 및 신뒰도 - **μƒνƒœ:** draft - **검증 단계:** conceptual (μ‹€μ œ 적용 사둀 발견 μ‹œ applied/validated둜 승격 κ°€λŠ₯) - **좜처 신뒰도:** B (W3Schools β€” widely used educational reference, not a primary standards body) - **μ‹ λ’° 점수:** 0.90 - **쀑볡 검사 κ²°κ³Ό:** μ‹ κ·œ 생성 (New discovery) ## πŸ”— 지식 κ·Έλž˜ν”„ (Knowledge Graph) - **μƒμœ„/루트:** [[JavaScript Tutorial]] - **κ΄€λ ¨ κ°œλ…:** [[JavaScript Async]], [[JavaScript Async Callbacks]], [[JavaScript Asynchronous]], [[JavaScript Promise]] - **μ°Έμ‘° λ§₯락:** The first concrete async tool β€” timers β€” that motivates callbacks as the next solution. ## πŸ“š 좜처 (Sources) - [S1] W3Schools β€” JavaScript Async Timeouts β€” https://www.w3schools.com/js/js_async_timeouts.asp ## πŸ“ λ³€κ²½ 이λ ₯ (Change history) - 2026-06-23: Initial draft synthesized from the W3Schools "JavaScript Async Timeouts" page (Astra wiki-curation, P-Reinforce v3.1 format).