如何仅在大小调整完成时调用JQuery的RESIZE事件？

大小调整完成时使用JQuery调用RESIZE事件

在开发响应式应用程序时，经常需要跟踪浏览器窗口大小的变化来调整大小相应的用户界面。但是，在手动调整窗口大小时连续调用调整大小函数可能会导致函数调用过多。

为了解决这个问题，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
});

在此解决方案中，在 300 毫秒延迟后触发 resizeEnd 自定义事件，保证它仅在调整大小完成后发生。

使用 setInterval() 的其他解决方案

或者，您可以使用 setInterval() 连续检查窗口大小是否发生变化。当大小在指定时间内保持稳定时，会调用 resize 函数。

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中文网其他相关文章！