So we will need to change our data properties to reflect that they are holding the debounced height and width, and then we will use the computed property to put a timeout on the height/width that is returned. We will compute the height and width using a getter and a setter. We can add debouncing by using a kind of middleman on the height/width property. Resizing the window is an event that a ResizeObserver can capture by definition, but calling appendChild () also resizes that element (unless overflow: hidden is set), because it needs to make space for the new elements. Since a resize event happens so quickly, and the event would fire so often, we can limit it and it won't be noticeable to the user, as long as the timeout we put on it isn't for too long a duration. ResizeObserver allows you to write a single piece of code that takes care of both scenarios. We limit the amount of time the handler function will fire, so the browser doesn't get bogged down trying to keep up with the constant firing of the resize event. Debounce means that instead of the handleResize function running each time the event fires, we add a timeout to cause the function to fire only after a certain time. It's really smart to add a function that will debounce the event listener. You can see a demo Codepen here.Īn event listener that fires constantly like this one can take a toll on performance. In this post, two methods are adapted to resize. Then change the window size and watch the numbers react to that change. jQuery is a well-structured and fully featured library of JavaScript which can execute the JS code effectively. While the resize event fires only for the window nowadays, you can get resize notifications for other elements using the ResizeObserver API.
Enter fullscreen mode Exit fullscreen mode
0 kommentar(er)
