면접... 트러블슈팅(?)...

면접을 봤다...
아쉬운 부분 투성인데 너무 아쉬웠던 부분은 사전 과제에 대해 추가 요구사항을 푸는 것이다.
디바운스 기능에 maxWait의 기능을 넣어서 구현하는 방법을 생각해보라고 하셨는데 너무 긴장한 나머지 대충 얼렁뚱땅 넘어갔다....
멍청하게 setTimeout에 인자를 더 준다고 말했다.

const debounce = (func, wait = 500, immediate = false) => {
  let timeoutId;
  let promise;
  let resolvePromise; 

  const setPromise = () => {
    if(resolvePromise) {
      resolvePromise();
      resolvePromise = null;
    }
  }

  const debounced = () => {
    const later = () => {
      timeoutId = null;
      if (!immediate) {
        func();
        setPromise();
      }
    }
    clearTimeout(timeoutId);
  
    if (!promise) {
      promise = new Promise(resolve => {
        resolvePromise = resolve;
      });
    }
    if (immediate) {
      func();
      setPromise();
    }
    timeoutId = setTimeout(later, wait);
    
    return promise;
  };
  
  debounced.cancel = () => {
    clearTimeout(timeoutId);
    timeoutId = null;
    setPromise();
  };

  return debounced;
}

이 코드에서 만약 지정된 시간에 디바운스가 실행이 안되면 최대 지정 시간에는 실행되게 하라는 추가사항이였다...

그렇다면 maxWait을 인자로 받고 받은 인자를 이용해서 만들면 될거라고 생각했다.
여기까지는 좋았으나 갑자기 웬걸 setTimeout에 너무 집중하는 바람에 setTimeout에 인자를 추가한다고 했다.
setTimeout을 재 설정해서 인자에 추가한다고 했어야됐는데....
코드로 보면

const debounce = (func, wait = 500, immediate = false, maxWait = 1000) => {
  let timeoutId;
  let maxTimeoutId;// 새로운 변수 선언해줌
  let promise;
  let resolvePromise; 

  const setPromise = () => {
    if(resolvePromise) {
      resolvePromise();
      resolvePromise = null;
    }
  }

  const debounced = () => {
    const later = () => {
      timeoutId = null;
      if (!immediate) {
        func();
        setPromise();
      }
      maxTimeoutId = null; 
      clearTimeout(maxTimeoutId);
    }
    clearTimeout(timeoutId);
    clearTimeout(maxTimeoutId);//이전 setTimeout이 할당된 maxTimeoutId를 클리어 해줌
  
    if (!promise) {
      promise = new Promise(resolve => {
        resolvePromise = resolve;
      });
    }
    if (immediate) {
      func();
      setPromise();
    }
    timeoutId = setTimeout(later, wait);
    maxTimeoutId = setTimeout(()=>{
      if(timeoutId){
        later();
    }}, maxWait);
    
    return promise;
  };
  
  debounced.cancel = () => {
    clearTimeout(timeoutId);
    timeoutId = null;
    setPromise();
  };

  return debounced;
}

실행 과정

1. maxWait을 인자로 받음
2. setTimeout()에 의해 maxWait 시간이 지난 후 later가 실행되게 설정
3. 만약 later가 wait만 기다렸다가 실행이 되면 함수는 promise를 완료상태로 만들고 max를 clear 해준다.
4. 만약 later가 실행이 안되면 setTimeout에 의해 max시간이 지나고 later가 실행돼서 max를 clear해서 초기화 해준다.