Debouncing the window resize event

Just a quick tip if you want to run some code on window resize but want to avoid freezing / slowing down the user's browser. The code below will run doSomething after the user is "done" resizing the window (in this case 500ms after the last resize event).

window.addEventListener('resize', () => {
  window.clearTimeout(window.resizeTimeout)
  window.resizeTimeout = window.setTimeout(() => {
    doSomething(this.someVariable)
  }, 500)
})

Home