Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to wait resize end event and then perform an action using JavaScript?
When resizing a browser window, the 'resize' event fires continuously during the resize operation. This can cause performance issues if you execute heavy JavaScript code on every resize event. The solution is to wait until the resize operation ends before performing any action.
The most common approach is using setTimeout() and clearTimeout() to create a debounced resize handler that only executes after the user stops resizing.
Syntax
let timeoutId;
window.addEventListener('resize', () => {
// Clear the previous timeout
clearTimeout(timeoutId);
// Set a new timeout to execute the function
timeoutId = setTimeout(yourFunction, delay);
});
This pattern works by clearing any existing timeout whenever a new resize event occurs, ensuring the function only runs after the specified delay period without interruption.
Using addEventListener Method
Here's a practical example that executes a function only after the resize operation completes:
<html>
<body>
<h2>Executing JavaScript function when resize event completes</h2>
<h3>Start resizing the window</h3>
<div id="content"></div>
<script>
let content = document.getElementById('content');
let timeoutId;
function executeAfterResize() {
content.innerHTML += "Resize completed at: " + new Date().toLocaleTimeString() + "<br>";
}
window.addEventListener('resize', () => {
clearTimeout(timeoutId);
timeoutId = setTimeout(executeAfterResize, 500);
});
</script>
</body>
</html>
Using onresize Event Attribute
You can also use the onresize attribute directly on the body element:
<html>
<body onresize="handleResize()">
<h3>Using onresize event attribute</h3>
<p>Start resizing the window</p>
<div id="output"></div>
<script>
let output = document.getElementById('output');
let timeoutId;
function executeAfterResize() {
output.innerHTML = "Window resize completed! New size: " +
window.innerWidth + "x" + window.innerHeight;
}
function handleResize() {
clearTimeout(timeoutId);
timeoutId = setTimeout(executeAfterResize, 300);
}
</script>
</body>
</html>
Custom Debounce Implementation
For more complex scenarios, you can create a reusable debounce function:
<html>
<body>
<h3>Custom debounce implementation</h3>
<p>Resize the window to see the debounced effect</p>
<div id="status"></div>
<script>
function debounce(func, delay) {
let timeoutId;
return function(...args) {
clearTimeout(timeoutId);
timeoutId = setTimeout(() => func.apply(this, args), delay);
};
}
function onResizeEnd() {
document.getElementById('status').innerHTML =
`Resize ended. Window size: ${window.innerWidth}x${window.innerHeight}`;
}
// Create debounced resize handler
const debouncedResize = debounce(onResizeEnd, 400);
window.addEventListener('resize', debouncedResize);
</script>
</body>
</html>
Comparison of Methods
| Method | Pros | Cons |
|---|---|---|
| addEventListener | Modern, flexible, multiple listeners | Slightly more code |
| onresize attribute | Simple, direct | Only one handler, inline mixing |
| Custom debounce | Reusable, configurable | More complex setup |
Key Considerations
- Delay timing: Use 250-500ms delay for most cases. Shorter delays may still fire frequently, longer delays feel unresponsive.
- Performance: Always debounce resize handlers that perform heavy operations like DOM queries or calculations.
- Memory leaks: Clear timeouts when removing event listeners to prevent memory leaks.
Conclusion
Debouncing resize events prevents performance issues by ensuring your code only runs after the user finishes resizing. Use setTimeout() and clearTimeout() for a reliable solution that improves user experience.
3K+ Views
