๐ŸŽฏ ์ด๋ฒคํŠธ ํšจ์œจ์ ์œผ๋กœ ์ฒ˜๋ฆฌํ•˜๊ธฐ(Debouncing, Throttling)

Lee Jooamยท2022๋…„ 4์›” 25์ผ
2
post-custom-banner

๋””๋ฐ”์šด์‹ฑ, ์“ฐ๋กœํ‹€๋ง์ด ํ•„์š”ํ•œ ์ด์œ ?

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 ์ด๋ฒคํŠธ ์ž์ฒด์— ๋Œ€ํ•œ ์กฐ์ ˆ์—” ๊ด€์—ฌํ•˜์ง€ ์•Š๋Š”๋‹ค.

Debouncing

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)
);

๋‹จ์ˆœํžˆ ์ด๋ฒคํŠธ๋ฅผ ์ฒ˜๋ฆฌํ•˜๋Š” ๊ฒƒ์— ๋น„ํ•ด ์‹คํ–‰ ๋นˆ๋„๊ฐ€ ํ˜„์ €ํ•˜๊ฒŒ ์ค„์–ด๋“ค์—ˆ๋‹ค!

๋””๋ฐ”์šด์‹ฑ์€ ์ด๋ฒคํŠธ์˜ ๋ฐœ์ƒ์ด ๋ฉˆ์ถ”๊ณ  ํŠน์ • ์‹œ๊ฐ„์ด ์ง€๋‚œ ํ›„์— ์ฝœ๋ฐฑ์ด ๋ฐœ๋™ํ•˜๋„๋ก ํ•˜๋Š” ๋ฐฉ์‹์ด๋‹ค.

์ง€์†์ ์œผ๋กœ ์ด๋ฒคํŠธ๊ฐ€ ๋ฐœ์ƒํ•˜๋Š” ์ค‘์ด๋ผ๋ฉด ์ฝœ๋ฐฑ์ด ๋ฐœ๋™ํ•˜์ง€ ์•Š๊ณ , ์‚ฌ์šฉ์ž๊ฐ€ ๋ฉˆ์ถฐ์•ผ๋งŒ ์ฝœ๋ฐฑ์ด ๋ฐœ๋™ํ•œ๋‹ค.

์ฃผ๊ธฐ์ ์œผ๋กœ ์ฝœ๋ฐฑ์˜ ๊ฒฐ๊ณผ๊ฐ€ ํ•„์š”ํ•˜์ง€ ์•Š์„ ๋•Œ ์œ ์šฉํ•˜๊ฒŒ ์“ฐ์ผ ์ˆ˜ ์žˆ๋‹ค.

Throttling

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๋ผ๋Š” ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์—์„œ ๋””๋ฐ”์šด์‹ฑ๊ณผ ์“ฐ๋กœํ‹€๋ง์„ ์ง€์›ํ•˜๋Š” ๊ธฐ๋Šฅ์ด ์žˆ๋‹ค.

์•„๋ฌด ์ƒ๊ฐ ์—†์ด ๊ฐ€์ ธ๋‹ค ์“ฐ๋Š” ๊ฒƒ๋ณด๋‹ค๋Š” ์ง์ ‘ ์ดํ•ด๋ฅผ ํ•˜๊ณ  ๋‚˜์„œ ์“ฐ๋ฉด ๋” ์ข‹์„ ๊ฒƒ ๊ฐ™๋‹ค๋Š” ์ƒ๊ฐ์„ ํ•ด์„œ ํฌ์ŠคํŠธ๋ฅผ ์ž‘์„ฑํ–ˆ๋‹ค.

๋””๋ฐ”์šด์‹ฑ์€ ๊ฒ€์ƒ‰์–ด ์ž๋™ ์™„์„ฑ์ฒ˜๋Ÿผ ์ง€์†์ ์œผ๋กœ ๋ณด์—ฌ์ค„ ํ•„์š”๊ฐ€ ์—†๋Š” ์ƒํ™ฉ, ์“ฐ๋กœํ‹€๋ง์€ ๋ฌดํ•œ ์Šคํฌ๋กค์ฒ˜๋Ÿผ ์ด๋ฒคํŠธ๊ฐ€ ์ง€์†์ ์œผ๋กœ ๋ฐœ์ƒํ•ด์•ผ๋˜๋Š” ์ƒํ™ฉ์— ์“ฐ๋ฉด ์ข‹์„ ๊ฒƒ ๊ฐ™๋‹ค.

profile
ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ์ž๋กœ ๊ฑธ์–ด๊ฐ€๋Š” ์ค‘์ž…๋‹ˆ๋‹ค.
post-custom-banner

4๊ฐœ์˜ ๋Œ“๊ธ€

comment-user-thumbnail
2022๋…„ 4์›” 25์ผ

์ข‹์€ ์ •๋ณด ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค

1๊ฐœ์˜ ๋‹ต๊ธ€
comment-user-thumbnail
2022๋…„ 4์›” 29์ผ

๋น ์šด์Šค๋น ์šด์Šค ๋‘๊ทผ๋Œ€

1๊ฐœ์˜ ๋‹ต๊ธ€