How to Trigger a JQuery RESIZE Event Only After Resizing is Complete?

Calling JQuery RESIZE Event Only After Resizing is Complete

When working with the JQuery resize event, it's often desirable to perform an action only after resizing has finished, rather than during continuous resizing. This is especially important to avoid excessive function calls.

To achieve this, you can utilize the following approach:

1. Set a Timeout:

   Create a timeout that triggers the function after a predetermined delay, ensuring it happens only when resizing has stabilized.

   $(window).resize(function() {
     clearTimeout(timer); // Reset any existing timeout
     timer = setTimeout(function() {
       // Your function goes here
     }, 300); // Set a 300ms delay
   });

2. Use a Boolean Flag:

   Maintain a flag to indicate whether resizing is in progress. When resizing starts, set the flag to true. After the timeout expires, set the flag to false, indicating that resizing has finished.

   var resizing = false;
   
   $(window).resize(function() {
     resizing = true; // Set flag to true when resizing starts
     setTimeout(function() {
       if (!resizing) return; // Ignore if resizing has already finished
       resizing = false; // Set flag to false when resizing finishes
       // Your function goes here
     }, 300); // Set a 300ms delay
   });

The above is the detailed content of How to Trigger a JQuery RESIZE Event Only After Resizing is Complete?. For more information, please follow other related articles on the PHP Chinese website!