>웹 프론트엔드 >JS 튜토리얼 >크기 조정 후 jQuery의 `resize` 이벤트 함수가 한 번만 실행되도록 하려면 어떻게 해야 합니까?

크기 조정 후 jQuery의 `resize` 이벤트 함수가 한 번만 실행되도록 하려면 어떻게 해야 합니까?

DDD
DDD원래의
2024-12-09 18:43:15289검색

How can I make jQuery's `resize` event function execute only once after resizing?

크기 조정 후 한 번만 jQuery RESIZE 이벤트 호출

jQuery 크기 조정 이벤트 기능을 사용할 때 기능이 필요한 상황이 발생할 수 있습니다. 브라우저가 크기 조정을 완료할 때 한 번만 실행됩니다. 그러나 기본 동작은 크기 조정 프로세스 중에 함수를 계속 호출하는 것입니다.

이를 극복하기 위해 "디바운싱"이라는 기술을 활용할 수 있습니다. 작동 방식은 다음과 같습니다.

  1. 간격 설정:
    setInterval()을 사용하여 시간 제한 기능을 시작하여 브라우저가 여전히 크기를 조정하고 있는지 확인합니다. 50~100밀리초 등의 합리적인 간격을 설정합니다.
  2. 간격 지우기:
    브라우저의 크기가 더 이상 조정되지 않는 경우(예: 사용자가 창 가장자리 끌기를 중지한 경우) ClearInterval()을 사용하여 1단계에서 생성된 간격을 지웁니다. 이렇게 하면 함수가 한 번만 호출됩니다.
  3. 디바운싱 구현:
    setInterval() 함수 내에서 브라우저 크기가 여전히 조정되고 있는지 확인합니다. 다음 코드를 예시로 사용하세요.
$(window).resize(() => {
  let timer;
  if (timer) {
    clearTimeout(timer);
  }
  timer = setTimeout(() => {
    // Your code to execute after resizing is complete
  }, 50);  // Adjust the delay as per your requirement
});
  1. 디바운스 함수 초기화:
    크기 조정 이벤트 리스너를 설정한 후 즉시 호출하여 디바운싱 함수를 트리거합니다. . 이렇게 하면 페이지가 로드될 때 함수가 한 번 실행됩니다.

이 기술을 구현하면 브라우저가 크기 조정을 마친 후 크기 조정 이벤트 함수를 한 번 호출할 수 있어 연속 함수 문제를 효과적으로 해결할 수 있습니다. 크기 조정 과정 중에 전화를 겁니다.

위 내용은 크기 조정 후 jQuery의 `resize` 이벤트 함수가 한 번만 실행되도록 하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.