10/31/2023 0 Comments On resizeUp until this point, we’ve had to rely on the global window.resize event to listen for resize events and check if certain elements have changed size. The most frequent reason for an element’s size to change is when the viewport is resized or the device’s direction changes between portrait and landscape. It allows for elements to be notified when their size changes. 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.Resize Observer is a new JavaScript API that’s very similar to other observer APIs like the Intersection Observer API. 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 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |