debounce 문제해결

문제 코드

  useEffect(() => {
    if (onSaveReady) {
      onSaveReady(async () => {
        debouncedAutoSave.flush(); // ✨ 디바운스 즉시 실행
        await finalizeDocument(); // 서버에 최종 저장
        setIsTempDocCreated(false); // 임시저장 플래그 초기화
        setShowRestoreModal(false); // 복원 모달 닫기
        fetchDocument(); // 최신 원본 다시 로드
      });
    }
  }, [finalizeDocument, onSaveReady, fetchDocument]);

 

해결 

  useEffect(() => {
    if (onSaveReady) {
      onSaveReady(async () => {
        // 1. 디바운스 즉시 실행
        debouncedAutoSave.flush();

        // 2. 디바운스 안의 autosave가 끝날 때까지 잠깐 기다리기
        await new Promise((resolve) => setTimeout(resolve, 50)); // 💡 50~100ms는 flush 직후를 커버

        // 3. finalize 실행
        await finalizeDocument();
        setIsTempDocCreated(false);
        setShowRestoreModal(false);
        fetchDocument();
      });
    }
  }, [debouncedAutoSave, finalizeDocument, onSaveReady, fetchDocument]);

 

 

원인

debouncedAutoSave.flush()가 즉시 실행되긴 했지만, 그 안에서 사용하는 autosave()는 비동기 함수야.
즉, flush()로 실행은 됐지만 그 await autosave()가 끝나기 전에 finalizeDocument()가 실행되고 있는 거야.

 

해결책

flush() 후 저장이 완료될 때까지 await해주기

flush()는 리턴값이 없어서 내부에서 별도 상태로 추적해야 함

그래서 디바운스된 자동저장이 끝날 때까지 기다리는 로직을 추가해줘야 함

 

왜 await flush()를 못 쓰냐면?

lodash.debounce의 flush()는 Promise를 반환하지 않음
→ 그래서 flush 이후 처리 완료 여부를 직접 await 할 수 없어

그래서 우리가 임시로 setTimeout(50ms)을 쓰는 거야.
autosave 내부에서 바로 처리되니까 대부분 이 짧은 딜레이로 충분히 기다려줌.

 

정리

- flush()는 실행만 시킬 뿐 → 비동기 처리 완료를 기다려주진 않음

- autosave가 끝나길 기다려야 finalizeDocument()가 최신 상태로 저장함

- 간단하게는 await new Promise(resolve => setTimeout(resolve, 50)) 추가

더 정확하게 하려면 autosavePromiseRef.current로 추적해서 await하기