setTimeout 이미지 자동 변경하기

메인 페이지의 이미지를 하나의 사진으로 고정시키고 다른 사진으로 교체되는 기능을 구현하고 싶었다. 검색과 고민 끝에 자바스크립트의 setTimeout을 이용하면 됐다.

setTimeout

전역 setTimeout() 메서드는 만료된 후 함수나 지정한 코드 조각을 실행하는 타이머를 설정합니다.

var timeoutID = setTimeout(function[, delay, arg1, arg2, ...]);
var timeoutID = setTimeout(function[, delay]);
var timeoutID = setTimeout(code[, delay]);

function

타이머가 만료된 뒤 실행할 function입니다.

비동기 함수로 작업하기

setTimeout(() => {console.log("첫 번째 메시지")}, 5000);
setTimeout(() => {console.log("두 번째 메시지")}, 3000);
setTimeout(() => {console.log("세 번째 메시지")}, 1000);

나의 코드

const showImage = async () => {
  setTimeout(() => {
    let img = document.querySelector(".jammin-one");
    let i = 1;

    img.addEventListener(
      "animationiteration",
      () => {
        img.setAttribute("src", "/assets/imgMain/" + ((i % 4) + 1) + ".png");
        console.log("종료");
        i++;
      },
      false
    );
  }, 1000);
};