JavaScript에서 시간 지연 구현

웹 개발 영역에서 다양한 이벤트의 타이밍을 제어하는 ​​것은 사용자 친화적이고 대화형 경험. 일반적인 요구 사항 중 하나는 사용자 입력으로 인해 발생하는 신속하거나 반복적인 작업을 방지하기 위해 시간 지연을 도입하는 것입니다.

특히 JavaScript는 시간 지연을 달성하는 다양한 방법을 제공합니다. 이미지 작업 시 제공된 코드와 마찬가지로 setTimeout() 함수를 활용하여 지정된 기간 동안 JavaScript 코드 실행을 일시 중지할 수 있습니다.

코드에서 이미지를 클릭하면 소스가 "img_onclick.jpg"로 변경되고 "img.jpg"로 되돌아가기 전에 1000밀리초(1초)의 지연이 발생하는 토글 동작을 만드는 것이 목표입니다. 이를 달성하기 위해 다음과 같이 setTimeout() 함수를 도입합니다:

var delayInMilliseconds = 1000; // Set the desired delay

$(".trigger").click(function() {
  // Code to handle image toggle
  $(this).next(".toggle-container").slideToggle();
  setTimeout(function() {
    $(this).find('img').prop('src', 'http://localhost:8888/images/img.jpg');
  }, delayInMilliseconds);
});

setTimeout() 함수 내에서 이미지 소스를 되돌리는 코드를 래핑하여 토글 작업이 수행된 후 지연을 생성합니다. 이렇게 하면 "img_onclick.jpg" 이미지를 클릭할 때 "img.jpg" 이미지가 즉시 표시되지 않습니다.

setTimeout()를 사용하지 않는 대체 접근 방식은 이 질문을 참조하세요. .