From acd7ad7b0e9abdcb5fc0fe18a7c61de1a93726af Mon Sep 17 00:00:00 2001 From: vardhan30016 Date: Fri, 7 Nov 2025 09:56:51 +0530 Subject: [PATCH 1/3] Add 10 unique JS questions in README --- README.md | 39 +++++++++++++++++++++++++++++++++++++++ 1 file changed, 39 insertions(+) diff --git a/README.md b/README.md index 823af7e5..3864eb6c 100644 --- a/README.md +++ b/README.md @@ -512,6 +512,7 @@ | 474 | [What is module scope in JavaScript?](#what-is-module-scope-in-javascript) | | 475 | [What are shadowing and illegal shadowing?](#what-are-shadowing-and-illegal-shadowing) | | 476 | [Why is it important to remove event listeners after use?](#why-is-it-important-to-remove-event-listeners-after-use) | +| 477 | [What is the difference between setTimeout and requestAnimationFrame in JavaScript, and when should you use each?](#what-is-the-difference-between-settimeout-and-requestanimationframe-in-javascript-and-when-should-you-use-each) | @@ -9532,6 +9533,44 @@ Common use cases and benefits: **[⬆ Back to Top](#table-of-contents)** +477. ### What is the difference between setTimeout and requestAnimationFrame in JavaScript, and when should you use each? + +In JavaScript: + +- `setTimeout` schedules a function to execute after a specified delay (in milliseconds), regardless of the browser’s rendering cycle. +- `requestAnimationFrame` schedules a function to run **before the next repaint**, making it ideal for smooth animations and UI updates. + +**When to use each:** + +1. **setTimeout**: + - Use for delayed tasks or operations that do not need to sync with the screen refresh. + - Example: Polling a server every few seconds. + +2. **requestAnimationFrame**: + - Use for animations or visual updates to ensure smooth, performant rendering. + - Example: Animating a moving object on the screen. + +**Example:** + +```javascript +// setTimeout example +setTimeout(() => { + console.log("Runs after 1 second"); +}, 1000); + +// requestAnimationFrame example +function animate() { + // Update animation state here + console.log("Frame rendered"); + requestAnimationFrame(animate); +} +requestAnimationFrame(animate); + + ``` + + **[⬆ Back to Top](#table-of-contents)** + + ### Coding Exercise From 4a4f772b2fc6ee11bf15dacd13053a537133a7a0 Mon Sep 17 00:00:00 2001 From: vardhan30016 Date: Fri, 7 Nov 2025 10:06:25 +0530 Subject: [PATCH 2/3] Add 10 unique JavaScript questions in README --- README.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 3864eb6c..d32ee8b3 100644 --- a/README.md +++ b/README.md @@ -9565,10 +9565,10 @@ function animate() { requestAnimationFrame(animate); } requestAnimationFrame(animate); - - ``` - + ``` **[⬆ Back to Top](#table-of-contents)** + + From 5b25ee2804f898361bc178bc1e4640965b7c012d Mon Sep 17 00:00:00 2001 From: vardhan30016 Date: Wed, 12 Nov 2025 19:22:52 +0530 Subject: [PATCH 3/3] Removed redundant 'JavaScript' mentions as per maintainer feedback --- README.md | 26 +++++++++++++------------- 1 file changed, 13 insertions(+), 13 deletions(-) diff --git a/README.md b/README.md index d32ee8b3..f9804400 100644 --- a/README.md +++ b/README.md @@ -512,7 +512,8 @@ | 474 | [What is module scope in JavaScript?](#what-is-module-scope-in-javascript) | | 475 | [What are shadowing and illegal shadowing?](#what-are-shadowing-and-illegal-shadowing) | | 476 | [Why is it important to remove event listeners after use?](#why-is-it-important-to-remove-event-listeners-after-use) | -| 477 | [What is the difference between setTimeout and requestAnimationFrame in JavaScript, and when should you use each?](#what-is-the-difference-between-settimeout-and-requestanimationframe-in-javascript-and-when-should-you-use-each) | +| 477 | [What is the difference between setTimeout and requestAnimationFrame, and when should you use each?](#what-is-the-difference-between-settimeout-and-requestanimationframe-and-when-should-you-use-each) | + @@ -9533,22 +9534,20 @@ Common use cases and benefits: **[⬆ Back to Top](#table-of-contents)** -477. ### What is the difference between setTimeout and requestAnimationFrame in JavaScript, and when should you use each? - -In JavaScript: +477. ### What is the difference between setTimeout and requestAnimationFrame, and when should you use each? -- `setTimeout` schedules a function to execute after a specified delay (in milliseconds), regardless of the browser’s rendering cycle. -- `requestAnimationFrame` schedules a function to run **before the next repaint**, making it ideal for smooth animations and UI updates. +- `setTimeout` schedules a function to execute after a specified delay (in milliseconds), independent of the browser’s rendering cycle. +- `requestAnimationFrame` schedules a function to run **right before the next repaint**, making it ideal for smooth animations and efficient visual updates. **When to use each:** -1. **setTimeout**: - - Use for delayed tasks or operations that do not need to sync with the screen refresh. - - Example: Polling a server every few seconds. +1. **setTimeout** + - Use for delayed tasks or operations that don’t need to sync with the display refresh rate. + - Example: Triggering periodic updates, polling data, or debouncing inputs. -2. **requestAnimationFrame**: - - Use for animations or visual updates to ensure smooth, performant rendering. - - Example: Animating a moving object on the screen. +2. **requestAnimationFrame** + - Use for animations or visual changes tied to frame rendering for smoother performance. + - Example: Moving an element across the screen or updating canvas drawings. **Example:** @@ -9566,8 +9565,9 @@ function animate() { } requestAnimationFrame(animate); ``` + **[⬆ Back to Top](#table-of-contents)** - +