debounce

정의

사전적정의

de + bounce

bounce = 튀다

(물체, 특히 공의) 타격 후 표면에서 빠르게 위로, 뒤로 또는 멀리 움직인다.

ex > 농구공을 튀기다.

de ? ⇒ 뒤에 오는 단어의 반대되는 행동을 나타내는 prefix

debounce = 안튀기다. 안튀다.

The term debounce comes from electronics. When you’re pressing a button, let’s say on your TV remote, the signal travels to the microchip of the remote so quickly that before you manage to release the button, it bounces, and the microchip registers your “click” multiple times.

tv 리모콘 버튼을 눌르면 사용자는 한번 눌렀지만 리모콘의 microchip 에는 사용자가 버튼을 눌러서 생긴 전자 신호가 여러번 가게 된다.

ex > 신호가 왔을 때마다 동작시키게 되면 사용자는 리모콘을 한번 눌렀지만 tv 가 껏다 켯다를 반복할 수 있다.

To mitigate this, once a signal from the button is received, the microchip stops processing signals from the button for a few microseconds while it’s physically impossible for you to press it again.

여러번 오는 전자신호를 감소시키기 위해 일단 버튼을 눌러 전자신호가 micro chip 에 오면 특정시간동안

전자신호가 오던말던 무시해버린다.

ex > 특정시간 동안 버튼을 여러번 눌러도 첫번째 버튼을 눌른 것만 처리를 해준다.

software 정의

javascript 에서는 code 실행요청이 여러번 와도 code 를 특정기간 동안 한번만 실행시키는 것

keyup event 발생할 때마다 saveInput () 을 실행시키지 않고 debounce 에 timer callback 으로 넣어서

timer 에 설정된 시간동안 신규로 요청이 들어올 때 마다 기존 timer 를 취소 시켜 callback 함수가 실행되지 않도록 함 결국 가장 마지막 요청의 경우 timer 를 취소시키지 않기 때문에 callback 함수가 실행됨

여러번 입력해서 event 를 발생시켜도 가장 마지막 event 때만 callback 만이 실행됨

/*
timer 에 어떻게 변수를 할당하는지 이해가 잘 안되었는데 
알고보니 closer 개념을 사용한 거였음 

processChanges 함수는 debounce 호출하면서 
timer 변수정보( 값, 포인터 ) 를 가진 함수이기 때문에 
timer 에 clearTimeout id 할당하고 지우기를 할 수 있음 

*/
function debounce(func, timeout = 300){
  let timer;
  return (...args) => {
    console.log("timer",timer)
    clearTimeout(timer);
    timer = setTimeout(() => { func.apply(this, args); }, timeout);
  };
}
  
function saveInput(){
  console.log('Saving data');
}

/*
processChanges = (...args) => {
    console.log("timer",timer)
    clearTimeout(timer);
	let func = () => saveInput() ; 
    timer = setTimeout(() => { func.apply(this, args); }, timeout);
  };
}

*/

const processChanges = debounce(() => saveInput());

사용하는 이유

event 발생 시 마다 함수를 실행할 경우 발생하는 낭비를 방지하기 위해

ex> 검색창에 입력할 때마다 api 요청하는 함수를 debounce 를 통해

특정기간동안 한번만 호출되도록 해서 api 호출 횟수를 줄일 수 있다.

참고

debounce

https://www.freecodecamp.org/news/javascript-debounce-example/