πŸ’» λ””λ°”μš΄μŠ€(Debounce)

waterglassesΒ·2022λ…„ 4μ›” 11일
1

TIL

λͺ©λ‘ 보기
18/50
post-thumbnail

이번 μ±•ν„°λŠ” λ””λ°”μš΄μŠ€μ— λŒ€ν•΄ λ‹€λ£¨μ—ˆμŠ΅λ‹ˆλ‹€.
⚠️ μ •λ¦¬ν•œ λ‚΄μš©μ€ μ˜€νƒ€λ‚˜ 잘λͺ»λœ 정보가 μžˆμ„ 수 μžˆμŠ΅λ‹ˆλ‹€. λŒ“κΈ€λ‘œ μ•Œλ €μ£Όμ‹œλ©΄ κ°μ‚¬ν•˜κ² μŠ΅λ‹ˆλ‹€

πŸ“ƒ 였늘 κ³΅λΆ€ν•œ 것

λ””λ°”μš΄μŠ€

μ–΄λ–€ λ‚΄μš©μ„ μž…λ ₯ν•˜λ‹€κ°€ νŠΉμ • μ‹œκ°„ λ™μ•ˆ λŒ€κΈ°ν•˜κ³  있으면 λ§ˆμ§€λ§‰μ— μž…λ ₯된 λ‚΄μš©μ„ λ°”νƒ•μœΌλ‘œ μ„œλ²„ μš”μ²­μ„ ν•˜λŠ” 방법이닀.

 $target.addEventListener("keyup", (e) => {
		debounce(e.target.value);
  });

μ΄λ ‡κ²Œ keyupμ΄λ²€νŠΈκ°€ λ°œμƒν•  λ•Œ debouceλ₯Ό ν˜ΈμΆœν•΄μ£Όλ©΄

let timer;
export const debounce = (value) => {
  if (timer) {
    clearTimeout(timer);
  }
  timer = setTimeout(() => {
    console.log("input μš”μ²­μ΄ λ“€μ–΄μ™”μŠ΅λ‹ˆλ‹€.", value);
  }, 2000);
};
  1. μ΄λ²€νŠΈκ°€ λ°œμƒν•  λ•Œλ§ˆλ‹€ debounceλ₯Ό ν˜ΈμΆœν•˜λŠ”λ° 이 λ•Œ λ§ˆλ‹€ timerλ₯Ό μ΄ˆκΈ°ν™”μ‹œν‚¨λ‹€.
  2. λ§ˆμ§€λ§‰ μ΄λ²€νŠΈμ—μ„œλ§Œ λ™μž‘ ν•΄μ•Ό ν•˜λ―€λ‘œ setTimeout을 톡해 이벀트λ₯Ό μ§€μ—°μ‹œν‚¨λ‹€.
  3. ν‚€λ³΄λ“œ μž…λ ₯이 λ°œμƒν•˜λ©΄ 2초 기닀리닀가가 λ‹€μ‹œ ν‚€λ³΄λ“œ μž…λ ₯이 λ°œμƒν•˜λ©΄ μ‹œκ°„μ„ μ΄ˆκΈ°ν™”ν•˜κ³  2초λ₯Ό κΈ°λ‹€λ¦¬λŠ” ν˜•μ‹μœΌλ‘œ μ§„ν–‰λ˜λ‹€κ°€ λ§ˆμ§€λ§‰ μ΄λ²€νŠΈκ°€ λ°œμƒν•˜λ©΄ 2초 뒀에 μ΄λ²€νŠΈκ°€ μ‹€ν–‰λœλ‹€.

😰 μ–΄λ €μ› λ˜ λ‚΄μš©

λ””λ°”μš΄μŠ€,, μ»€μŠ€ν…€ 이벀트,, 그리고 μ „λΆ€^^

πŸ”₯ 였늘의 λŠλ‚€μ 

λ…Έμ…˜ ν΄λ‘œλ‹μ„ μ‹œμž‘ν•˜κΈ° μ „ 16μΌμ°¨κΉŒμ§€ κ°•μ˜λ₯Ό λ‹€ λ“€μ—ˆλ‹€. ν•˜μ§€λ§Œ!!😑 μ»΄ν¬λ„ŒνŠΈ 뢄리, fetch, route, history.. λ“±λ“± λ‚΄ κ²ƒμœΌλ‘œ λ§Œλ“€μ§€ λͺ»ν•˜μ˜€λ‹€..γ… γ…  였늘 κ°•μ˜ μ€‘κ°„λΆ€ν„°λŠ” μ½”λ“œλ₯Ό κ·Έλƒ₯ λ”°λΌμΉ˜λŠ” 것 같은..

λ…Έμ…˜ ν΄λ‘œλ‹μ„ μ‹œμž‘ν•˜κΈ° μ „ μžλ™ μ™„μ„± νŽΈμ§‘κΈ°λ₯Ό μ „μ²΄μ μœΌλ‘œ λ³΅μŠ΅ν•˜κ³  μ‹œμž‘ν•΄μ•Όκ² λ‹€. λ©΄μ ‘ μŠ€ν„°λ””λ„ λ”₯ λ‹€μ΄λΈŒ μŠ€ν„°λ””λ„ λ…Έμ…˜ ν΄λ‘œλ‹κ³Ό 병행할 수 μžˆμ„μ§€ λ„ˆλ¬΄ κ±±μ •λœλ‹€πŸ˜‚ λ„ˆλ¬΄ 미리 κ²λ¨ΉλŠ”κ±΄κ°€μš”,,?😞 κ·Έλž˜λ„ μ§€κΈˆκΉŒμ§€ κΎΈμ€€νžˆ 잘 ν•΄μ™”μœΌλ‹ˆ μ»¨λ””μ…˜ μ‘°μ ˆλ„ 곡뢀도 ν™”μ΄νŒ…~!πŸ’•

πŸ—£ 였늘의 TMI

이 글을 λ³΄λŠ” λͺ¨λ“  ν”„λ‘±μ΄λΆ„λ“€κ»˜.. λ§€λ‹ˆμ €λ‹˜κ³Ό λ©΄λ‹΄ 기회 κΌ­ μž‘μœΌμ„Έμš”!😘 값진 μ‹œκ°„μ΄μ—ˆμ–΄μš”!

Refer

ν”„λ‘œκ·Έλž˜λ¨ΈμŠ€ λ°λΈŒμ½”μŠ€
λ””λ°”μš΄μŠ€μ™€ μ“°λ‘œν‹€λ§μ— λŒ€ν•΄ μ•Œμ•„λ³΄μž!

였늘의 λ‚΄μš© 정리

λ°λΈŒμ½”μŠ€ Day16

profile
맀 μˆœκ°„ μ„±μž₯ν•˜λŠ” κ°œλ°œμžκ°€ 되렀고 λ…Έλ ₯ν•˜κ³  μžˆμŠ΅λ‹ˆλ‹€.

1개의 λŒ“κΈ€

comment-user-thumbnail
2022λ…„ 4μ›” 11일

이 글보고 λ©΄λ‹΄ μ‹ μ²­ ν•˜λŸ¬ κ°‘λ‹ˆλ‹€γ…‹γ…‹γ…‹γ…‹γ…‹

λ‹΅κΈ€ 달기