Search
๐Ÿ‘†๐Ÿผ

debounce, throttle

๐Ÿง‘๐Ÿผโ€๐Ÿš€ Debounce, Throttle์„ ์•Œ์•„์•ผ ํ•˜๋Š” ์ด์œ 

โ—์‚ฌ์šฉ์ž๊ฐ€ ์ฐฝ ํฌ๊ธฐ ์กฐ์ •์„ ๋ฉˆ์ถœ ๋•Œ๊นŒ์ง€ ๊ธฐ๋‹ค๋ ธ๋‹ค๊ฐ€ resizing event๋ฅผ ๋ฐ˜์˜ํ•˜๊ณ  ์‹ถ๋‹ค๋ฉด โ—์‚ฌ์šฉ์ž๊ฐ€ ํ‚ค๋ณด๋“œ ์ž…๋ ฅ์„ ์ค‘์ง€ํ•  ๋•Œ๊นŒ์ง€ AJAX ์ด๋ฒคํŠธ๋ฅผ ๋ฐœ์ƒ์‹œํ‚ค์ง€ ์•Š๊ณ  ์‹ถ๋‹ค๋ฉด โ—๋“ฑ๋กํ•ด๋†“์€ ์Šคํฌ๋กค ์ด๋ฒคํŠธ๋ฆฌ์Šค๋„ˆ๋กœ ์ธํ•ด ์„ฑ๋Šฅ ์ €ํ•˜๋ฅผ ๊ฒฝํ—˜ํ•˜๊ณ  ์‹ถ์ง€ ์•Š๋‹ค๋ฉด

๐Ÿ™‹๐Ÿปโ€โ™‚๏ธ ์ด ๋ฌธ์„œ๋ฅผ ๋ณด๊ณ  ๋‚˜๋ฉด

Debounce๊ฐœ๋…์„ ์‘์šฉํ•ด ๋ถˆํ•„์š”ํ•œ ์žฆ์€ ์š”์ฒญ์„ ์ œ์–ดํ•  ์ˆ˜ ์žˆ๋‹ค.
Throttle ๊ฐœ๋…์„ ์‘์šฉํ•˜์—ฌ ์ผ์ • ์ฃผ๊ธฐ๋งˆ๋‹ค ์›ํ•˜๋Š” ๋™์ž‘์„ ์ œ์–ดํ•  ์ˆ˜ ์žˆ๋‹ค.

Debounce

๋ณดํ†ต ๊ธฐ๊ณ„์  ์Šค์œ„์น˜์„ผ์„œ๋‚˜, ํ„ฐ์น˜์„ผ์„œ๊ฐ™์€๊ฑธ ๋‹ค๋ฃฐ ๋•Œ ์ˆœ๊ฐ„์ ์œผ๋กœ ์Šค์œ„์น˜์˜ ์ ‘์ ์—์„œ on/off๊ฐ€ ์—ฌ๋Ÿฌ ๋ฒˆ ๋ฐ˜๋ณต๋˜๋Š” ํ˜„์ƒ์ด ์žˆ๋Š”๋ฐ ์ด๋ฅผ ๋ฐ”์šด์‹ฑํ˜„์ƒ์ด๋ผ๊ณ  ํ•ฉ๋‹ˆ๋‹ค. ์Šค์œ„์น˜์˜ ์ ‘์ ์—์„œ ์ง„๋™ ํ”๋“ค๋ฆผ์ด๋‚˜ ์งง์€ ์ˆœ๊ฐ„์— ๋ถ™์—ˆ๋‹ค ๋–จ์–ด์กŒ๋‹ค๊ฐ€ ๋ฐœ์ƒํ•˜๋Š”๋ฐ ํ˜„์‹ค์—์„œ ์ž์ฃผ ๋ฐœ์ƒํ•˜๋Š” ์ผ์ด์ฃ . ์ด๋Ÿฌํ•œ ๋ฐ”์šด์Šค ํ˜„์ƒ์„ ์—†์• ๋Š” ๊ฒƒ์„ ๋””๋ฐ”์šด์‹ฑ์ด๋ผ๊ณ  ํ•ฉ๋‹ˆ๋‹ค.
Debounce๋Š” ์ด๋ฒคํŠธ๋ฅผ ๊ทธ๋ฃนํ™”ํ•˜์—ฌ ํŠน์ • ์‹œ๊ฐ„์ด ์ง€๋‚œ ํ›„ ํ•˜๋‚˜์˜ ์ด๋ฒคํŠธ๋งŒ ๋ฐœ์ƒํ•˜๋„๋ก ํ•˜๋Š” ๊ธฐ์ˆ ์ž…๋‹ˆ๋‹ค. ์ฆ‰, ์ˆœ์ฐจ์  ํ˜ธ์ถœ์„ ํ•˜๋‚˜๋กœ '๊ทธ๋ฃนํ™”' ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๊ทธ๋ž˜์„œ ์—ฐ์†์ ์œผ๋กœ ํ˜ธ์ถœ๋˜๋Š” ํ•จ์ˆ˜ ์ค‘ ๋งˆ์ง€๋ง‰ ํ•จ์ˆ˜(๋˜๋Š” ์ œ์ผ ์ฒ˜์Œ)๋งŒ ํ˜ธ์ถœํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
์ด Debounce๋Š” ์›น์—์„œ ์ฃผ๋กœ AJAX ๊ฒ€์ƒ‰์— ์ž์ฃผ ์“ฐ์ž…๋‹ˆ๋‹ค.
์˜ˆ๋ฅผ ๋“ค์–ด ๊ฒ€์ƒ‰์ฐฝ์— ๋ฉ”์ด์ปค์ค€์„ ๊ฒ€์ƒ‰ํ•œ๋‹ค๊ณ  ํ•ด๋ด…์‹œ๋‹ค. ์ผ๋ฐ˜์ ์œผ๋กœ๋Š” ํ•œ ๊ธ€์ž์”ฉ ์น  ๋•Œ๋งˆ๋‹ค API ์š”์ฒญ์„ ํ•˜๋ฉด์„œ ๊ฒฐ๊ณผ๊ฐ’์„ ๋ฐ›์•„์˜ต๋‹ˆ๋‹ค. ๊ทธ๋Ÿฐ๋ฐ ์‚ฌ๋žŒ์€ ๋ˆ„๊ตฌ๋‚˜ ์˜คํƒ€๊ฐ€ ๋‚  ์ˆ˜ ์žˆ๊ณ , ๋งค๋ฒˆ ์š”์ฒญํ•˜๋Š” ๊ฒƒ์ด ํšจ์œจ์ ์ด์ง€ ์•Š์€ ์ˆœ๊ฐ„๋„ ๋งŽ์Šต๋‹ˆ๋‹ค. ๋ฌด์—‡๋ณด๋‹ค๋„ ์ด์™€ ๊ฐ™์€ ๋ถ€๋ถ„์€ ๊ตฌ๊ธ€๋งต์ฒ˜๋Ÿผ ์œ ๋ฃŒ API๋ฅผ ์‚ฌ์šฉํ•  ๋•Œ ํฐ ๋น„์šฉ์ด ๋˜๋Š”๋ฐ์š”. ๋˜‘๊ฐ™์€ ์š”์ฒญ์„ 1๋ฒˆ๋งŒ ํ•ด๋„ ๋˜๋Š”๊ฑธ 10๋ฒˆ ํ–ˆ๋‹ค๊ณ  ํ•œ๋‹ค๋ฉด ๊ทธ๋งŒํผ 10๋ฐฐ ์ด์ƒ์˜ ๋น„์šฉ ์†์‹ค์ด ๋ฐœ์ƒํ•˜๋Š” ๊ฒƒ์ด์ฃ . ์šฐ๋ฆฌ๊ฐ€ ์ด๋ฒˆ ๋ฏธ์…˜์—์„œ ํ•ด๊ฒฐํ•ด์•ผ ํ•˜๋Š” Youtube API์˜ ๊ฒฝ์šฐ์—๋„ ์š”์ฒญ ํšŸ์ˆ˜๊ฐ€ ๋ฌดํ•œ์ด์ง€ ์•Š๊ธฐ ๋•Œ๋ฌธ์— ์ตœ์†Œํ™”ํ•  ๋ถ€๋ถ„๋“ค์„ ๊ณ ๋ฏผํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.
๋ณดํ†ต ์‚ฌ๋žŒ๋“ค์€ ์—ฐ๋‹ฌ์•„ ํƒ€์ž๋ฅผ ์น˜๊ธฐ ๋•Œ๋ฌธ์—, ์ž…๋ ฅ์ด ๋‹ค ๋๋‚œ ํ›„์— ์š”์ฒญ์„ ๋ณด๋‚ด๋„ ์ถฉ๋ถ„ํ•œ ๊ฒฝ์šฐ๊ฐ€ ๋งŽ์Šต๋‹ˆ๋‹ค. ์ฆ‰ ํƒ€์ž๋ฅผ ์น  ๋•Œ๋งˆ๋‹ค ํƒ€์ด๋จธ๋ฅผ ์„ค์ •ํ•œ ํ›„, ํŠน์ • ์‹œ๊ฐ„ ๋™์•ˆ ์ž…๋ ฅ์ด ์—†์œผ๋ฉด ์ž…๋ ฅ์ด ๋๋‚œ ๊ฒƒ์œผ๋กœ ๊ฐ€์ •ํ•ด๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค. (๋ฌผ๋ก  ์ด์‹œ๊ฐ„์ด ๋„ˆ๋ฌด ๊ธธ๋ฉด ์‚ฌ์šฉ์ž ๊ฒฝํ—˜์— ์•ˆ์ข‹๊ฒ ์ฃ ?) ์˜ˆ๋ฅผ ๋“ค์–ด 3000ms๋กœ ์‹œ๊ฐ„์„ ์„ค์ •ํ•ด๋ณผ๊ฒŒ์š”.
let debounce; const $searchInput = document.querySelector("#input"); $searchInput.addEventListener("input", onSearchInputHandler); const onSearchInputHandler = (e) => { if (debounce) { clearTimeout(debounce); } debounce = setTimeout(() => { console.log("ajax ์š”์ฒญ ๋ถ€๋ถ„", e.target.value); }, 3000); };
Plain Text
์œ„์™€ ๊ฐ™์ด ์ž‘์„ฑํ•˜๋ฉด ๋”์ด์ƒ ์—ฌ๋Ÿฌ๋ฒˆ ํ˜ธ์ถœ๋˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ์ด๊ฒƒ์ด ๋ฐ”๋กœ ๋””๋ฐ”์šด์‹ฑ์ž…๋‹ˆ๋‹ค. lodash๋ผ๋Š” ํ›Œ๋ฅญํ•œ ์œ ํ‹ธ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์„œ๋Š” ์•„์˜ˆ debounce ๋ฉ”์„œ๋“œ๋ฅผ ์ œ๊ณตํ•˜๋Š”๋ฐ์š”. ๋งํฌ๋ฅผ ๋ณด๊ณ  ์ฝ”๋“œ๋ฅผ ๋ณด๋Š” ๊ฒƒ๋„ ๋„์›€์ด ๋  ๊ฒƒ ๊ฐ™์•„์š”!

๐Ÿš€ Debounce ์ดˆ๊ฐ„๋‹จ ๋ฏธ์…˜

์•„๋ž˜์ฒ˜๋Ÿผ debounce๋˜๋Š” ํ˜•ํƒœ๋กœ ์‚ฌ์šฉ์ž์˜ ์ž…๋ ฅ๊ฐ’์„ ํ™”๋ฉด์— ๋ณด์—ฌ์ง€๊ฒŒ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์ฝ”๋“œ๋ฅผ ์ž‘์„ฑํ•ด์ฃผ์„ธ์š”. debounce๋˜๋Š” Input form์˜ ๊ฒฝ์šฐ ์‚ฌ์šฉ์ž๊ฐ€ 2์ดˆ ๋™์•ˆ ์ž…๋ ฅ์ด ์—†๋‹ค๋ฉด ํ™”๋ฉด์— ๋ณด์—ฌ์ง€๊ฒŒ ์ž‘์„ฑํ•ด์ฃผ์„ธ์š”.

Throttle

Throttle์˜ ์‚ฌ์ „์  ์˜๋ฏธ๋Š” ๋ชฉ์„ ์กฐ๋ฅด๋Š” ํ–‰์œ„์ธ๋ฐ์š”. ์ด ์ ์—์„œ ์œ ๋ž˜ํ•˜์—ฌ ๋ฌด์–ธ๊ฐ€์˜ ์ถœ๋ ฅ์„ ์กฐ์ ˆํ•˜๋Š” ๋œป๋„ ๊ฐ€์ง€๊ณ  ์žˆ์–ด, ๊ธฐ๊ณ„์žฅ์น˜์— ์—ฐ๊ฒฐ๋œ ์•ก์ฒด๋‚˜ ๊ธฐ์ฒด๊ฐ€ ํ๋ฅด๋Š” ๊ด€์— ๋‹ฌ๋ฆฐ ๋ฐธ๋ธŒ๋ฅผ ์กฐ์ ˆํ•˜๋Š” ๊ณผ์ •์—์„œ๋„ ์ด ๋‹จ์–ด๊ฐ€ ์“ฐ์ž…๋‹ˆ๋‹ค. ์ต์ˆ™์น˜ ์•Š์€ ์–ดํœ˜์ด์ง€๋งŒ, ์ถœ๋ ฅ์„ ์กฐ์ ˆํ•˜๋Š” ๊ฑฐ๋ผ๊ณ  ์ƒ๊ฐํ•˜๋ฉด ๋ณด๋‹ค ์‰ฌ์šธ ๊ฒƒ ๊ฐ™์•„์š”. ์ถœ๋ ฅ์„ ์กฐ์ ˆํ•˜๋Š” Throttle์€ ์ด๋ฒคํŠธ๋ฅผ ์ผ์ •ํ•œ ์ฃผ๊ธฐ๋งˆ๋‹ค ๋ฐœ์ƒํ•˜๋„๋ก ํ•˜๋Š” ๊ธฐ์ˆ ์ž…๋‹ˆ๋‹ค. ์˜ˆ๋ฅผ ๋“ค์–ด Throttle์˜ ์„ค์ • ์‹œ๊ฐ„์œผ๋กœ 1ms๋ฅผ ์ฃผ๊ฒŒ ๋œ๋‹ค๋ฉด, ํ•ด๋‹น ์ด๋ฒคํŠธ๋Š” 1ms ๋™์•ˆ ์ตœ๋Œ€ ํ•œ ๋ฒˆ๋งŒ ๋ฐœ์ƒํ•˜๊ฒŒ ๋ฉ๋‹ˆ๋‹ค. ์ฆ‰ ๋งˆ์ง€๋ง‰ ํ•จ์ˆ˜๊ฐ€ ํ˜ธ์ถœ๋œ ํ›„ ์ผ์ • ์‹œ๊ฐ„์ด ์ง€๋‚˜๊ธฐ ์ „์— ๋‹ค์‹œ ํ˜ธ์ถœ๋˜์ง€ ์•Š๋„๋ก ํ•ฉ๋‹ˆ๋‹ค.
์ด Throttle์€ ์„ฑ๋Šฅ ๋ฌธ์ œ๋กœ ์ธํ•ด ์Šคํฌ๋กค ์ด๋ฒคํŠธ์—์„œ ์ฃผ๋กœ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค. ์Šคํฌ๋กค์„ ์˜ฌ๋ฆฌ๊ฑฐ๋‚˜ ๋‚ด๋ฆด ๋•Œ ์ด๋ฒคํŠธ๊ฐ€ ๋งค์šฐ ๋งŽ์ด ๋ฐœ์ƒํ•˜๋Š”๋ฐ์š”. ๋งŒ์•ฝ ์Šคํฌ๋กค ์ด๋ฒคํŠธ๊ฐ€ ๋ฐœ์ƒํ•  ๋•Œ๋งˆ๋‹ค ๋งŽ์€ ๊ธฐ๋Šฅ์„ ํ•˜๋Š” ํ•จ์ˆ˜๊ฐ€ ์ฝœ๋ฐฑ์œผ๋กœ ํ• ๋‹น๋˜์–ด์žˆ๋‹ค๋ฉด ๊ต‰์žฅํžˆ ์•ˆ์ข‹์€ ์‚ฌ์šฉ์ž ๊ฒฝํ—˜์ด ๋  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๊ทธ๋Ÿด ๋•Œ Throttle์„ ์‚ฌ์šฉํ•ด์ฃผ๋ฉด ๋ฉ๋‹ˆ๋‹ค.
let throttle; const $searchInput = document.querySelector("#input"); $searchInput.addEventListener("input", onSearchInputHandler); const onSearchInputHandler = (e) => { if (!throttle) { throttle = setTimeout(() => { throttle = null; console.log("ajax ์š”์ฒญ ๋ถ€๋ถ„", e.target.value); }, 300); } };
JavaScript

๐Ÿš€ Throttle ์ดˆ๊ฐ„๋‹จ ๋ฏธ์…˜

Throttle๋ฅผ ๊ตฌํ˜„ํ•˜๋Š” ์—ฐ์Šต์„ ํ•ด๋ณด๊ณ  ์‹ถ๋‹ค๋ฉด ์œ„ Codepen Sample์„ ํ†ตํ•ด์„œ ์•„๋ž˜ ์š”๊ตฌ์‚ฌํ•ญ์„ ๊ตฌํ˜„ํ•ด๋ณด์„ธ์š”!
์Šคํฌ๋กค ์ด๋ฒคํŠธ์˜ ์ฝœ๋ฐฑ ํ•จ์ˆ˜๊ฐ€ ์‹คํ–‰๋  ๋•Œ๋งˆ๋‹ค count๋ฅผ 1 ์ฆ๊ฐ€์‹œํ‚ค๊ธฐ
Throttle๋ฅผ ์ ์šฉํ•˜์—ฌ 300ms์˜ ํ…€์„ ๋‘๊ณ  ์‹คํ–‰์‹œํ‚จ ํ›„ count ๋น„๊ตํ•ด๋ณด๊ธฐ

๐Ÿ“˜ ์ •๋ฆฌ

โ€ข
Debounce๋Š” ์—ฌ๋Ÿฌ๋ฒˆ ๋ฐœ์ƒํ•˜๋Š” ์ด๋ฒคํŠธ์—์„œ, ๊ฐ€์žฅ ๋งˆ์ง€๋ง‰ ๋˜๋Š” ์ œ์ผ ์ฒ˜์Œ ์ด๋ฒคํŠธ๋งŒ์„ ์‹คํ–‰๋˜๋„๋ก ๋งŒ๋“œ๋Š” ๊ฐœ๋…์ด๋‹ค.
โ€ข
Throttle์€ ์—ฌ๋Ÿฌ๋ฒˆ ๋ฐœ์ƒํ•˜๋Š” ์ด๋ฒคํŠธ๋ฅผ ์ผ์ • ์‹œ๊ฐ„ ๋™์•ˆ, ํ•œ ๋ฒˆ๋งŒ ์‹คํ–‰๋˜๋„๋ก ๋งŒ๋“œ๋Š” ๊ฐœ๋…์ด๋‹ค.

๐Ÿ”— ์ฐธ๊ณ  ๋งํฌ