크기 조정 이벤트가 완료된 후에만 작업을 트리거하는 방법은 무엇입니까?

액션을 트리거하기 위해 'Resize' 이벤트가 끝날 때까지 기다리는 중

반응형 디자인으로 작업할 때 종종 크기 조정 프로세스가 완전히 완료된 후에만 작업을 수행합니다. 그러나 $(window).resize()를 사용하는 기존 이벤트 처리는 크기 조정 프로세스 중에 여러 호출을 트리거하여 원치 않는 동작을 초래할 수 있습니다.

해결책: setTimeout() 및clearTimeout() 사용

원하는 동작을 달성하려면 setTimeout()과clearTimeout()을 조합하여 사용할 수 있습니다. 예는 다음과 같습니다.

function resizedw() {
  // Haven't resized in 100ms!
}

var doit;
window.onresize = function () {
  clearTimeout(doit);
  doit = setTimeout(resizedw, 100);
};

이 접근 방식은 타이머를 활용하여 resizew() 함수의 실행을 지연시킵니다. 크기 조정 이벤트가 발생하면 기존 타이머가 모두 지워지고 새 타이머가 시작됩니다. 크기 조정 프로세스가 100밀리초 이내에 계속되면 타이머가 다시 재설정됩니다. 크기 조정이 100밀리초 동안 중지된 경우에만 resizew() 함수가 호출됩니다.

jsfiddle의 예:

이 솔루션의 실제 예는 다음을 참조하세요. 답변에 제공된 jsfiddle 링크로 이동하세요.

위 내용은 크기 조정 이벤트가 완료된 후에만 작업을 트리거하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!