In the event handler, you would then have to figure out which elements have been affected by that change and call a specific routine to react appropriately. 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.Before ResizeObserver, you had to attach a listener to the document's resize event to get notified of any change of the viewport's dimensions. 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. 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. 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. Then change the window size and watch the numbers react to that change.
Enter fullscreen mode Exit fullscreen mode
0 kommentar(er)
