Vue3 Timeout() [JavaScript]

만들어본 Todolist에서 검색기능을 활용하여 검색 글자를 쓸때마다 계속해서 네트워크를 통하여 데이터를 주고받는 모습이다.

 

즉각적인 반응을 원하는게 아니라면 setTimeout을 통해 딜레이를 줄 수 있다.

VS code에서 seTimeout을 치면 보여주는 자동완성 모습

let timeout = null;

watch(search, () => {
  clearTimeout(timeout);
  timeout = setTimeout(() => {
    getTodolist();
  }, 1000);
});

여기서 들어간 timeout변수와 clearTimeout은 setTimeout만 사용할 경우, 하나씩 칠때마다 1초간 딜레이만 주어, 결국에 동일한 양의 네트워크 송수신량을 보여주지만,

다음 입력(함수의 사용)이 감지될경우 기존의 timeout을 리셋시키면서 마지막으로 입력된 setTimeout만 네트워크로 전달하는것이라고 보면 된다