학습 기록 22: set Timeout과clear Timeout 호출 함수

setTimeout 호출 함수 사용하기

setInterval (함수명, 밀리초) 을 설정하면 지정한 밀리초 간격으로 특정한 방법을 계속 호출할 수 있지만 setTimeout은 setTimeout (함수명, 밀리초) 이기 때문에 밀리초 후에 특정한 방법을 한 번만 불러도 됩니다.
예를 들어, 다음 예제에서는 버튼을 클릭한 후 2초 후에 Date 객체를 생성하여 콘솔에 표시합니다.
index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Javascript Practice</title>
</head>
<body>
  <button type="click" id="button">showDatePerSecondを呼ぶ</button>
  <script src="main.js"></script>
</body>
</html>

index.js

function showDateTimePerSecond() {
   console.log(new Date());
};

document.getElementById('button').onclick = function(){
  setTimeout(showDateTimePerSecond,2000);
}

setTimeout (함수 이름, 밀리초) 에서 중복 함수 호출

setTimeout은 setInterval과 유사한 사용 방법도 사용할 수 있습니다.
아래의 예에서 showDateTimePerSecond의 함수에서 setTimeout이라고 하고 매개 변수에서 showDateTimePerSecond를 추출하여 반복적으로 처리한다.
index.js

function showDateTimePerSecond() {
  console.log(new Date());
  setTimeout(showDateTimePerSecond, 1000);
};

showDateTimePerSecond();

clearTimeout () 로 처리 중지

set Timeout의 중복을 멈추기 위해clear Timeout 방법을 준비했습니다.
다음 예에서 변수 i가 3일 때clearTimeout 정지 처리라고 합니다.
index.js

let i = 0;

function showDateTimePerSecond() {
  console.log(new Date());
  const timeoutId = setTimeout(showDateTimePerSecond, 1000);
  i ++;
  if (i > 2) {
    clearTimeout(timeoutId);
  }
};

showDateTimePerSecond();

setInterval과 setTimeout의 차이

setInterval에서 중복 처리를 하는 것과 setTimeout에서 중복 처리를 하는 것은 어떤 차이가 있습니까?
아래의 사이트는 매우 이해하기 쉽다.요컨대
setInterval←는 호출된 함수의 처리가 끝난 것과 상관없이 지정된 시간이 되면 문답이 필요 없고 매개 변수로 전달된 함수를 호출합니다.
setTimeout에서 ← 호출된 함수를 반복적으로 처리한 후 표시된 시간을 매개 변수로 전달하는 함수로 불러옵니다.

Reference

이 문제에 관하여(학습 기록 22: set Timeout과clear Timeout 호출 함수), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/hirokobe26/items/8cbca5c401f4ec8f9191

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다