let counter = 0;
window.addEventListener("scroll", () => {
console.log("Hello current scroll is", scrollY, ++counter);
});
๋ค์๊ณผ ๊ฐ์ด ์ด๋ฒคํธ๋ฅผ ์ฒ๋ฆฌํ๋ ํธ๋ค๋ฌ๊ฐ ์๋ค๊ณ ํด๋ณด์.
์ฝ๊ฐ์ ์คํฌ๋กค๋ง ๋ง์ผ๋ก๋ ์์ฒญ๋ ์ด๋ฒคํธ๊ฐ ๋ฐ๋ณต์ ์ผ๋ก ๋ฐ์ํ๊ฒ ๋๋ค. ์ง๊ธ ๊ฐ์ ๊ฒฝ์ฐ๋ ๋จ์ํ console ์ถ๋ ฅ์ด๊ธฐ ๋๋ฌธ์ ๊ทธ๋ ๊ฒ ํฐ ๋น์ฉ์ด ๋ฐ์ํ์ง ์๋๋ค.
ํ์ง๋ง fetch๋ ajax ๊ฐ์ ๋คํธ์ํฌ ์์ฒญ์ด๋ผ๋ฉด? ์๋ฒ์ ๋ธ๋ผ์ฐ์ ์ ๋ถํ๊ฐ ๊ฑธ๋ฆฌ๋ ๊ฒ์ ๋ฌผ๋ก , ์ฟผ๋ฆฌ ํ๋ฒ ๋น ๋น์ฉ์ด๋ผ๋ ๋ฐ์ํ๋ค๋ฉด ์ด์ ๊ฐ์ ์ด๋ฒคํธ ํธ๋ค๋ง์ ์์ฒญ๋ ๋ถ๋ด์ด๋ค.
์ด๋ฐ ๋ฌธ์ ๋ฅผ ํด๊ฒฐํ๊ธฐ ์ํด ๋์จ ๋ฐฉ๋ฒ์ด Debounce์ Throttle์ด๋ค.
Debouncing, Throttling(๋๋ฐ์ด์ฑ, ์ฐ๋กํ๋ง)์ DOM ์ด๋ฒคํธ๋ฅผ ์ ์ดํ๋ ๋ฐฉ๋ฒ๋ค์ด๋ค.
๋ณดํต DOM ์ด๋ฒคํธ๊ฐ ๋ฐ์ํ์ ๋ ์ด๋ฒคํธ ๋ฆฌ์ค๋์ ์ฝ๋ฐฑ์ ์ ๋ฌํ๋ ์์ผ๋ก ์ด๋ฒคํธ๋ฅผ ์ฒ๋ฆฌํ๋ค.
๋๋ฐ์ด์ฑ๊ณผ ์ฐ๋กํ๋ง์ DOM ์ด๋ฒคํธ์ ์ ๋ฌํ ์ฝ๋ฐฑ ์ฌ์ด์ ์ ์ด๊ณ์ธต์ ๋๊ณ '์ฝ๋ฐฑ'์ ๋ํ ์คํ์ ์กฐ์ ํ๋ค.
DOM ์ด๋ฒคํธ ์์ฒด์ ๋ํ ์กฐ์ ์ ๊ด์ฌํ์ง ์๋๋ค.
function debouncer(callback, limit) {
let timeout;
return function () {
clearTimeout(timeout);
timeout = setTimeout(() => {
callback();
}, limit);
};
}
window.addEventListener(
"scroll",
debouncer(() => {
console.log("Hello current scroll is", scrollY, ++counter);
}, 200)
);
๋จ์ํ ์ด๋ฒคํธ๋ฅผ ์ฒ๋ฆฌํ๋ ๊ฒ์ ๋นํด ์คํ ๋น๋๊ฐ ํ์ ํ๊ฒ ์ค์ด๋ค์๋ค!
๋๋ฐ์ด์ฑ์ ์ด๋ฒคํธ์ ๋ฐ์์ด ๋ฉ์ถ๊ณ ํน์ ์๊ฐ์ด ์ง๋ ํ์ ์ฝ๋ฐฑ์ด ๋ฐ๋ํ๋๋ก ํ๋ ๋ฐฉ์์ด๋ค.
์ง์์ ์ผ๋ก ์ด๋ฒคํธ๊ฐ ๋ฐ์ํ๋ ์ค์ด๋ผ๋ฉด ์ฝ๋ฐฑ์ด ๋ฐ๋ํ์ง ์๊ณ , ์ฌ์ฉ์๊ฐ ๋ฉ์ถฐ์ผ๋ง ์ฝ๋ฐฑ์ด ๋ฐ๋ํ๋ค.
์ฃผ๊ธฐ์ ์ผ๋ก ์ฝ๋ฐฑ์ ๊ฒฐ๊ณผ๊ฐ ํ์ํ์ง ์์ ๋ ์ ์ฉํ๊ฒ ์ฐ์ผ ์ ์๋ค.
function throttler(callback, limit) {
let wating = false;
return function () {
if (!wating) {
callback();
wating = true;
setTimeout(() => {
wating = false;
}, limit);
}
};
}
window.addEventListener(
"scroll",
debouncer(() => {
console.log("Hello current scroll is", scrollY, ++counter);
}, 200)
);
์ฐ๋กํ๋ง๋ ๋๋ฐ์ด์ฑ๊ณผ ์ ์ฌํ ๋ฐฉ์์ด๋ค.
์ฐจ์ด์ ์ ๋๋ฐ์ด์ฑ์ด ์ด๋ฒคํธ๊ฐ ๋๋๊ณ ์ฝ๋ฐฑ์ ์คํ์ํจ๋ค๋ฉด, ์ฐ๋กํ๋ง์ ์ด๋ฒคํธ๊ฐ ๋ฐ์๋๋ ๋์ค์๋ ์ง์์ ์ผ๋ก ์ฝ๋ฐฑ์ ์คํ์ํจ๋ค๋ ์ ์ด๋ค.
lodash๋ผ๋ ๋ผ์ด๋ธ๋ฌ๋ฆฌ์์ ๋๋ฐ์ด์ฑ๊ณผ ์ฐ๋กํ๋ง์ ์ง์ํ๋ ๊ธฐ๋ฅ์ด ์๋ค.
์๋ฌด ์๊ฐ ์์ด ๊ฐ์ ธ๋ค ์ฐ๋ ๊ฒ๋ณด๋ค๋ ์ง์ ์ดํด๋ฅผ ํ๊ณ ๋์ ์ฐ๋ฉด ๋ ์ข์ ๊ฒ ๊ฐ๋ค๋ ์๊ฐ์ ํด์ ํฌ์คํธ๋ฅผ ์์ฑํ๋ค.
๋๋ฐ์ด์ฑ์ ๊ฒ์์ด ์๋ ์์ฑ์ฒ๋ผ ์ง์์ ์ผ๋ก ๋ณด์ฌ์ค ํ์๊ฐ ์๋ ์ํฉ, ์ฐ๋กํ๋ง์ ๋ฌดํ ์คํฌ๋กค์ฒ๋ผ ์ด๋ฒคํธ๊ฐ ์ง์์ ์ผ๋ก ๋ฐ์ํด์ผ๋๋ ์ํฉ์ ์ฐ๋ฉด ์ข์ ๊ฒ ๊ฐ๋ค.
์ข์ ์ ๋ณด ๊ฐ์ฌํฉ๋๋ค