크기 조정이 완료될 때만 JQuery의 RESIZE 이벤트를 호출하는 방법은 무엇입니까?

크기 조정 완료 시 JQuery를 사용하여 RESIZE 이벤트 호출

반응형 애플리케이션을 개발할 때 브라우저 창 크기 변경을 추적하여 크기를 조정해야 하는 경우가 많습니다. 이에 따라 UI. 그러나 창 크기를 수동으로 조정하는 동안 계속해서 크기 조정 함수를 호출하면 과도한 함수 호출이 발생할 수 있습니다.

이 문제를 해결하기 위해 JQuery에서는 창 크기 조정이 완료된 후 한 번만 크기 조정 함수를 호출하는 방법을 제공합니다.

setTimeout()을 사용하는 솔루션

JQuery의 크기 조정 이벤트 리스너에서 다음을 사용합니다. 지정된 지연으로 원하는 작업을 호출하는 setTimeout() 함수. 이렇게 하면 크기 조정이 중지된 후에만 함수가 호출됩니다.

$(window).resize(function() {
  if (this.resizeTO) clearTimeout(this.resizeTO);
  this.resizeTO = setTimeout(function() {
    $(this).trigger('resizeEnd');
  }, 300);
});

$(window).on('resizeEnd', function() {
  // Code to be executed after resizing is complete
});

이 솔루션에서는 resizeEnd 사용자 정의 이벤트가 300ms 지연 후에 트리거되어 크기 조정이 완료된 후에만 발생하도록 보장합니다.

다른 솔루션을 사용하는 경우 setInterval()

또는 setInterval()을 사용하여 창 크기가 변경되었는지 지속적으로 확인할 수 있습니다. 지정된 기간 동안 크기가 안정적으로 유지되면 크기 조정 함수가 호출됩니다.

var resizeInterval;
window.onresize = function() {
  if (resizeInterval) clearInterval(resizeInterval);
  resizeInterval = setInterval(function() {
    if (window.innerWidth == previousWidth && window.innerHeight == previousHeight) {
      clearInterval(resizeInterval);
      // Code to be executed after resizing is complete
    }
  }, 300);
  previousWidth = window.innerWidth;
  previousHeight = window.innerHeight;
};

두 솔루션 모두 애플리케이션의 요구 사항에 따라 지연 값을 조정할 수 있습니다.

위 내용은 크기 조정이 완료될 때만 JQuery의 RESIZE 이벤트를 호출하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!