đĸ Debounce āĻļāĻŋāĻā§āĻ¨: āĻāĻ¨āĻĒā§āĻā§ āĻŦāĻžāĻ°āĻŦāĻžāĻ° API āĻāĻ˛ āĻĨāĻžāĻŽāĻžāĻ¨
āĻ āĻ¨ā§āĻ āĻ¸āĻŽā§ āĻ¸āĻžāĻ°ā§āĻ āĻŦāĻā§āĻ¸ā§ āĻāĻžāĻāĻĒ āĻāĻ°āĻ˛ā§āĻ āĻŦāĻžāĻ°āĻŦāĻžāĻ° API āĻāĻ˛ āĻšāĻā§āĻā§, āĻĢāĻ˛ā§ āĻ˛ā§āĻ¯āĻžāĻ, āĻāĻ°āĻ āĻāĻ° āĻā§āĻ˛ āĻ°ā§āĻāĻžāĻ˛ā§āĻā§āĻ° āĻāĻžāĻĒ āĻĒā§ā§ đĩđĢāĨ¤ āĻāĻ āĻ¸āĻŽāĻ¸ā§āĻ¯āĻžāĻ° āĻ¸āĻŦāĻā§ā§ā§ āĻāĻžāĻā§āĻ° āĻ¸āĻŽāĻžāĻ§āĻžāĻ¨ āĻšāĻ˛ā§ debounce āĻŦā§āĻ¯āĻŦāĻšāĻžāĻ° āĻāĻ°āĻžāĨ¤
â āĻā§āĻāĻžāĻŦā§ āĻāĻ°āĻŦā§āĻ¨
1. “āĻāĻžāĻāĻĒ āĻĨāĻžāĻŽāĻžāĻ°” āĻĒāĻ° āĻāĻŋāĻā§āĻā§āĻˇāĻŖ āĻ āĻĒā§āĻā§āĻˇāĻž āĻāĻ°ā§ āĻ¤āĻžāĻ°āĻĒāĻ° āĻāĻžāĻ āĻāĻžāĻ˛āĻžāĻ¨
2. āĻ¨āĻ¤ā§āĻ¨ āĻāĻ°ā§ āĻāĻŦāĻžāĻ° āĻāĻžāĻāĻĒ āĻšāĻ˛ā§ āĻāĻā§āĻ° āĻ āĻĒā§āĻā§āĻˇāĻž āĻŦāĻžāĻ¤āĻŋāĻ˛ āĻāĻ°ā§āĻ¨
3. Search/resize/scroll āĻāĻ° āĻŽāĻ¤ā§ āĻāĻā§āĻ¨ā§āĻā§ debounce āĻŦā§āĻ¯āĻŦāĻšāĻžāĻ° āĻāĻ°ā§āĻ¨
āĻā§āĻŦ āĻā§āĻ āĻāĻĻāĻžāĻšāĻ°āĻŖ (plain JS):
function debounce(fn, wait){
let t;
return function(...args){
clearTimeout(t);
t = setTimeout(() => fn(...args), wait);
};
}
const onType = debounce((text) => fetchData(text), 300);
// input.addEventListener("input", e => onType(e.target.value));
â ī¸ āĻ¸āĻ¤āĻ°ā§āĻāĻ¤āĻž
wait āĻ¸āĻŽā§ āĻā§āĻŦ āĻāĻŽ āĻšāĻ˛ā§ āĻ¤āĻŦā§āĻ āĻŦā§āĻļāĻŋ āĻāĻ˛ āĻšāĻŦā§, āĻā§āĻŦ āĻŦā§āĻļāĻŋ āĻšāĻ˛ā§ UI āĻ§ā§āĻ° āĻ˛āĻžāĻāĻŦā§āĨ¤ 200–500ms āĻ¸āĻžāĻ§āĻžāĻ°āĻŖāĻ¤ āĻā§āĻ°āĻžāĻ āĻāĻ°ā§ āĻĻā§āĻā§āĻ¨āĨ¤ āĻāĻāĻžā§āĻž, āĻĻā§āĻ°ā§āĻ¤ āĻāĻžāĻ¨āĻž āĻ°āĻŋāĻā§ā§ā§āĻ¸ā§āĻā§ “āĻļā§āĻˇ āĻāĻžāĻāĻĒ”āĻāĻžāĻ āĻ¯ā§āĻ¨ āĻĢāĻ˛āĻžāĻĢāĻ˛ āĻĻā§āĻāĻžā§ āĻ¸ā§āĻāĻžāĻ āĻā§ā§āĻžāĻ˛ āĻāĻ°āĻŦā§āĻ¨ âŗđ§
āĻāĻĒāĻ¨āĻŋ āĻā§āĻ¨ āĻāĻžā§āĻāĻžā§ debounce āĻŦā§āĻ¯āĻŦāĻšāĻžāĻ° āĻāĻ°ā§āĻ¨—search, chat, āĻ¨āĻžāĻāĻŋ scroll? āĻāĻŽā§āĻ¨ā§āĻā§ āĻŦāĻ˛ā§āĻ¨ đ
#javascript #debounce #frontend #performance
āĻ āĻ¨ā§āĻ āĻ¸āĻŽā§ āĻ¸āĻžāĻ°ā§āĻ āĻŦāĻā§āĻ¸ā§ āĻāĻžāĻāĻĒ āĻāĻ°āĻ˛ā§āĻ āĻŦāĻžāĻ°āĻŦāĻžāĻ° API āĻāĻ˛ āĻšāĻā§āĻā§, āĻĢāĻ˛ā§ āĻ˛ā§āĻ¯āĻžāĻ, āĻāĻ°āĻ āĻāĻ° āĻā§āĻ˛ āĻ°ā§āĻāĻžāĻ˛ā§āĻā§āĻ° āĻāĻžāĻĒ āĻĒā§ā§ đĩđĢāĨ¤ āĻāĻ āĻ¸āĻŽāĻ¸ā§āĻ¯āĻžāĻ° āĻ¸āĻŦāĻā§ā§ā§ āĻāĻžāĻā§āĻ° āĻ¸āĻŽāĻžāĻ§āĻžāĻ¨ āĻšāĻ˛ā§ debounce āĻŦā§āĻ¯āĻŦāĻšāĻžāĻ° āĻāĻ°āĻžāĨ¤
â āĻā§āĻāĻžāĻŦā§ āĻāĻ°āĻŦā§āĻ¨
1. “āĻāĻžāĻāĻĒ āĻĨāĻžāĻŽāĻžāĻ°” āĻĒāĻ° āĻāĻŋāĻā§āĻā§āĻˇāĻŖ āĻ āĻĒā§āĻā§āĻˇāĻž āĻāĻ°ā§ āĻ¤āĻžāĻ°āĻĒāĻ° āĻāĻžāĻ āĻāĻžāĻ˛āĻžāĻ¨
2. āĻ¨āĻ¤ā§āĻ¨ āĻāĻ°ā§ āĻāĻŦāĻžāĻ° āĻāĻžāĻāĻĒ āĻšāĻ˛ā§ āĻāĻā§āĻ° āĻ āĻĒā§āĻā§āĻˇāĻž āĻŦāĻžāĻ¤āĻŋāĻ˛ āĻāĻ°ā§āĻ¨
3. Search/resize/scroll āĻāĻ° āĻŽāĻ¤ā§ āĻāĻā§āĻ¨ā§āĻā§ debounce āĻŦā§āĻ¯āĻŦāĻšāĻžāĻ° āĻāĻ°ā§āĻ¨
āĻā§āĻŦ āĻā§āĻ āĻāĻĻāĻžāĻšāĻ°āĻŖ (plain JS):
function debounce(fn, wait){
let t;
return function(...args){
clearTimeout(t);
t = setTimeout(() => fn(...args), wait);
};
}
const onType = debounce((text) => fetchData(text), 300);
// input.addEventListener("input", e => onType(e.target.value));
â ī¸ āĻ¸āĻ¤āĻ°ā§āĻāĻ¤āĻž
wait āĻ¸āĻŽā§ āĻā§āĻŦ āĻāĻŽ āĻšāĻ˛ā§ āĻ¤āĻŦā§āĻ āĻŦā§āĻļāĻŋ āĻāĻ˛ āĻšāĻŦā§, āĻā§āĻŦ āĻŦā§āĻļāĻŋ āĻšāĻ˛ā§ UI āĻ§ā§āĻ° āĻ˛āĻžāĻāĻŦā§āĨ¤ 200–500ms āĻ¸āĻžāĻ§āĻžāĻ°āĻŖāĻ¤ āĻā§āĻ°āĻžāĻ āĻāĻ°ā§ āĻĻā§āĻā§āĻ¨āĨ¤ āĻāĻāĻžā§āĻž, āĻĻā§āĻ°ā§āĻ¤ āĻāĻžāĻ¨āĻž āĻ°āĻŋāĻā§ā§ā§āĻ¸ā§āĻā§ “āĻļā§āĻˇ āĻāĻžāĻāĻĒ”āĻāĻžāĻ āĻ¯ā§āĻ¨ āĻĢāĻ˛āĻžāĻĢāĻ˛ āĻĻā§āĻāĻžā§ āĻ¸ā§āĻāĻžāĻ āĻā§ā§āĻžāĻ˛ āĻāĻ°āĻŦā§āĻ¨ âŗđ§
āĻāĻĒāĻ¨āĻŋ āĻā§āĻ¨ āĻāĻžā§āĻāĻžā§ debounce āĻŦā§āĻ¯āĻŦāĻšāĻžāĻ° āĻāĻ°ā§āĻ¨—search, chat, āĻ¨āĻžāĻāĻŋ scroll? āĻāĻŽā§āĻ¨ā§āĻā§ āĻŦāĻ˛ā§āĻ¨ đ
#javascript #debounce #frontend #performance
đĸ Debounce āĻļāĻŋāĻā§āĻ¨: āĻāĻ¨āĻĒā§āĻā§ āĻŦāĻžāĻ°āĻŦāĻžāĻ° API āĻāĻ˛ āĻĨāĻžāĻŽāĻžāĻ¨
āĻ
āĻ¨ā§āĻ āĻ¸āĻŽā§ āĻ¸āĻžāĻ°ā§āĻ āĻŦāĻā§āĻ¸ā§ āĻāĻžāĻāĻĒ āĻāĻ°āĻ˛ā§āĻ āĻŦāĻžāĻ°āĻŦāĻžāĻ° API āĻāĻ˛ āĻšāĻā§āĻā§, āĻĢāĻ˛ā§ āĻ˛ā§āĻ¯āĻžāĻ, āĻāĻ°āĻ āĻāĻ° āĻā§āĻ˛ āĻ°ā§āĻāĻžāĻ˛ā§āĻā§āĻ° āĻāĻžāĻĒ āĻĒā§ā§ đĩđĢāĨ¤ āĻāĻ āĻ¸āĻŽāĻ¸ā§āĻ¯āĻžāĻ° āĻ¸āĻŦāĻā§ā§ā§ āĻāĻžāĻā§āĻ° āĻ¸āĻŽāĻžāĻ§āĻžāĻ¨ āĻšāĻ˛ā§ debounce āĻŦā§āĻ¯āĻŦāĻšāĻžāĻ° āĻāĻ°āĻžāĨ¤
â
āĻā§āĻāĻžāĻŦā§ āĻāĻ°āĻŦā§āĻ¨
1. “āĻāĻžāĻāĻĒ āĻĨāĻžāĻŽāĻžāĻ°” āĻĒāĻ° āĻāĻŋāĻā§āĻā§āĻˇāĻŖ āĻ
āĻĒā§āĻā§āĻˇāĻž āĻāĻ°ā§ āĻ¤āĻžāĻ°āĻĒāĻ° āĻāĻžāĻ āĻāĻžāĻ˛āĻžāĻ¨
2. āĻ¨āĻ¤ā§āĻ¨ āĻāĻ°ā§ āĻāĻŦāĻžāĻ° āĻāĻžāĻāĻĒ āĻšāĻ˛ā§ āĻāĻā§āĻ° āĻ
āĻĒā§āĻā§āĻˇāĻž āĻŦāĻžāĻ¤āĻŋāĻ˛ āĻāĻ°ā§āĻ¨
3. Search/resize/scroll āĻāĻ° āĻŽāĻ¤ā§ āĻāĻā§āĻ¨ā§āĻā§ debounce āĻŦā§āĻ¯āĻŦāĻšāĻžāĻ° āĻāĻ°ā§āĻ¨
āĻā§āĻŦ āĻā§āĻ āĻāĻĻāĻžāĻšāĻ°āĻŖ (plain JS):
function debounce(fn, wait){
let t;
return function(...args){
clearTimeout(t);
t = setTimeout(() => fn(...args), wait);
};
}
const onType = debounce((text) => fetchData(text), 300);
// input.addEventListener("input", e => onType(e.target.value));
â ī¸ āĻ¸āĻ¤āĻ°ā§āĻāĻ¤āĻž
wait āĻ¸āĻŽā§ āĻā§āĻŦ āĻāĻŽ āĻšāĻ˛ā§ āĻ¤āĻŦā§āĻ āĻŦā§āĻļāĻŋ āĻāĻ˛ āĻšāĻŦā§, āĻā§āĻŦ āĻŦā§āĻļāĻŋ āĻšāĻ˛ā§ UI āĻ§ā§āĻ° āĻ˛āĻžāĻāĻŦā§āĨ¤ 200–500ms āĻ¸āĻžāĻ§āĻžāĻ°āĻŖāĻ¤ āĻā§āĻ°āĻžāĻ āĻāĻ°ā§ āĻĻā§āĻā§āĻ¨āĨ¤ āĻāĻāĻžā§āĻž, āĻĻā§āĻ°ā§āĻ¤ āĻāĻžāĻ¨āĻž āĻ°āĻŋāĻā§ā§ā§āĻ¸ā§āĻā§ “āĻļā§āĻˇ āĻāĻžāĻāĻĒ”āĻāĻžāĻ āĻ¯ā§āĻ¨ āĻĢāĻ˛āĻžāĻĢāĻ˛ āĻĻā§āĻāĻžā§ āĻ¸ā§āĻāĻžāĻ āĻā§ā§āĻžāĻ˛ āĻāĻ°āĻŦā§āĻ¨ âŗđ§
āĻāĻĒāĻ¨āĻŋ āĻā§āĻ¨ āĻāĻžā§āĻāĻžā§ debounce āĻŦā§āĻ¯āĻŦāĻšāĻžāĻ° āĻāĻ°ā§āĻ¨—search, chat, āĻ¨āĻžāĻāĻŋ scroll? āĻāĻŽā§āĻ¨ā§āĻā§ āĻŦāĻ˛ā§āĻ¨ đ
#javascript #debounce #frontend #performance
Arabic
French
Spanish
Portuguese
Deutsch
Turkish
Dutch
Italiano
Russian
Romaian
Portuguese (Brazil)
Greek
