Browser & Storage
Timers
setTimeout, setInterval
💡 setTimeout ek "ek baar wala alarm" hai — set karo, X time baad ek baar bajega. setInterval ek "REPEATING alarm" hai — set karo, HAR X time baad baar-baar bajता rahega, jab tak manually band na karo.
setTimeout(callback, delay) callback ko delay milliseconds BAAD, EK BAAR chalाता hai. setInterval(callback, delay) callback ko HAR delay milliseconds mein, REPEATEDLY chalata hai — jab tak clearInterval() se roka na jaaye. Dono asynchronous hain — JavaScript ko "block" nahi karte.
// Ek baar, 2 second baad:
const timeoutId = setTimeout(() => {
console.log("2 second ho gaye!");
}, 2000);
// Cancel karna (agar zaroorat pade):
clearTimeout(timeoutId);
// Repeating, har 1 second mein:
let count = 0;
const intervalId = setInterval(() => {
count++;
console.log("Tick " + count);
if (count === 5) {
clearInterval(intervalId); // ZAROORI — warna hamesha chalता rahega!
}
}, 1000);⏰
setTimeout ek "ek baar wala alarm" hai — set karo, X time baad ek baar bajega. setInterval ek "REPEATING alarm" hai — set karo, HAR X time baad baar-baar bajता rahega, jab tak manually band na karo.
1 / 2
⚡ Quick Recap
- setTimeout = ek baar, delay ke baad
- setInterval = repeating, jab tak clearInterval() na ho
- Dono async hain — code ko block nahi karte
Is page mein (2 subtopics)
"Debouncing" ek pattern hai jaha function ko baar-baar rapidly call hone se roka jaata hai — sirf tab chalता hai jab calls RUKI hon kuch der ke liye. Search-as-you-type ke liye classic use-case (har keystroke par API call na karo).
function debounce(func, delay) {
let timeoutId;
return function(...args) {
clearTimeout(timeoutId); // purana timer cancel karo
timeoutId = setTimeout(() => func(...args), delay);
};
}
const searchAPI = (query) => console.log("Searching for: " + query);
const debouncedSearch = debounce(searchAPI, 500);
// User typing "hello" rapidly:
debouncedSearch("h");
debouncedSearch("he");
debouncedSearch("hel");
debouncedSearch("hello");
// Sirf EK API call hoga, 500ms baad, "hello" ke saath —
// beech ke rapid calls cancel ho gayeTip: Debouncing search inputs, window resize handlers, aur form auto-save jaisi features mein bahut common hai — unnecessary API calls/computations dramatically kam karta hai.
setTimeout(fn, 0) callback ko "current execution khatam hone ke turant baad" chalाता hai — event loop ke through jaata hai, isliye current synchronous code se hamesha baad mein chalता hai, chahe delay 0 ho.
console.log("1");
setTimeout(() => console.log("3 (deferred)"), 0);
console.log("2");
// Output: 1, 2, 3 — 0ms delay ke bawajood, 3 sabse baad chalता haiTip: Ye technique kabhi-kabhi UI updates ko "defer" karne ke liye use hoti hai — jaise ek heavy computation ke baad, browser ko pehle screen update karne ka mauka dena, phir agla kaam continue karna.