How to Trigger a Function After Window Resize Completion in jQuery?

JQuery: Capturing the Resize Event Upon Completion

The jQuery resize event can be triggered continuously during window resizing, leading to performance issues. To address this, we aim to invoke a function only after resizing has concluded.

Solution Using Interval Manipulation:

As suggested by thejh, we can leverage the setInterval function to periodically check if the browser has finished resizing. Once it detects inactivity, it can clear the interval and call the desired function:

var resizeTimer;

$(window).resize(function() {
  // Reset the resize timer if it exists
  if (resizeTimer) clearTimeout(resizeTimer);

  // Set a new resize timer
  resizeTimer = setTimeout(function() {
    // Call the desired function here
  }, 30);
});

In this solution, we use clearTimeout to cancel any existing resize timer. We then set a new timer with a short interval (30 milliseconds in this example). Once the timer elapses, we know resizing has ceased, and we can execute the desired function.

The above is the detailed content of How to Trigger a Function After Window Resize Completion in jQuery?. For more information, please follow other related articles on the PHP Chinese website!