JavaScript JQuery window resize how to fire AFTER the resize is completed

Question

I m using JQuery as such     window  resize function               However  it appears that if the person manually resizes their browser windows by dragging the window edge to make it larger smaller  the  resize event above fires multiple times   Question  How to I call a function AFTER the browser window resize completed  so that the event only fires once

User · Answer

Declare globally delayed listener   var resize timeout     window  on  resize orientationchange   function        clearTimeout resize timeout        resize timeout   setTimeout function              window  trigger  resized           250         And below use listeners to resized event as you want     window  on  resized   function        console log  resized

User · Answer

Assuming that the mouse cursor should return to the document after window resize  we can create a callback-like behavior with onmouseover event  Don t forget that this solution may not work for touch-enabled screens as expected   var resizeTimer  var resized   false    window  resize function        clearTimeout resizeTimer      resizeTimer   setTimeout function            if  resized               resized   true               document  mouseover function                    resized   false                    do something here                  this  unbind  mouseover                                  500

User · Answer

It works for me  See this solution - https   alvarotrigo com blog firing-resize-event-only-once-when-resizing-is-finished    x000D   x000D  var resizeId  x000D    window  resize function     x000D      clearTimeout resizeId   x000D      resizeId   setTimeout doneResizing  500   x000D      x000D  function doneResizing    x000D        whatever we want to do  x000D    x000D   x000D   x000D

User · Answer

This is what i ve implemented     window  resize function      setTimeout someFunction  500        we can clear the setTimeout if we expect resize to happen less than 500ms   Good Luck

User · Answer

Many thanks to David Walsh  here is a vanilla version of underscore debounce   Code      Returns a function  that  as long as it continues to be invoked  will not    be triggered  The function will be called after it stops being called for    N milliseconds  If  immediate  is passed  trigger the function on the    leading edge  instead of the trailing  function debounce func  wait  immediate        var timeout      return function             var context   this  args   arguments          var later   function                 timeout   null              if   immediate  func apply context  args                      var callNow   immediate  amp  amp   timeout          clearTimeout timeout           timeout   setTimeout later  wait           if  callNow  func apply context  args               Simple usage   var myEfficientFn   debounce function            All the taxing stuff you do    250      window  on  resize   myEfficientFn     Ref  http   davidwalsh name javascript-debounce-function

User · Answer

If you have Underscore js installed  you could     window  resize   debounce function        alert  Resized      500

User · Answer

Simple jQuery plugin for delayed window resize event   SYNTAX   Add new function to resize event  jQuery window  resizeDelayed  func  delay  id       delay and id are optional   Remove the function by declaring its ID  added earlier  jQuery window  resizeDelayed  false  id      Remove all functions  jQuery window  resizeDelayed  false      USAGE      ADD SOME FUNCTIONS TO RESIZE EVENT jQuery window  resizeDelayed  function    console log   first event - should run after 0 4 seconds       400    id-first-event     jQuery window  resizeDelayed  function    console log  second event - should run after 1 5 seconds       1500   id-second-event     jQuery window  resizeDelayed  function    console log   third event - should run after 3 0 seconds       3000   id-third-event         LETS DELETE THE SECOND ONE jQuery window  resizeDelayed  false   id-second-event         LETS ADD ONE WITH AUTOGENERATED ID THIS COULDNT BE DELETED LATER  AND DEFAULT TIMEOUT  500ms  jQuery window  resizeDelayed  function    console log  newest event - should run after 0 5 second             LETS CALL RESIZE EVENT MANUALLY MULTIPLE TIMES  OR YOU CAN RESIZE YOUR BROWSER WINDOW  TO SEE WHAT WILL HAPPEN jQuery window  resize   resize   resize   resize   resize   resize   resize      USAGE OUTPUT   first event - should run after 0 4 seconds newest event - should run after 0 5 second third event - should run after 3 0 seconds   PLUGIN   jQuery fn resizeDelayed    function             gt  gt  gt  THIS PART RUNS ONLY ONCE - RIGHT NOW      var rd funcs       rd counter   1  foreachResizeFunction   function  func    for  var index in rd funcs     func index                REGISTER JQUERY RESIZE EVENT HANDLER     jQuery window  resize function                 SET RESET TIMEOUT ON EACH REGISTERED FUNCTION         foreachResizeFunction function index                   IF THIS FUNCTION IS MANUALLY DISABLED   by calling jQuery window  resizeDelayed false   id                     THEN JUST CONTINUE TO NEXT ONE             if  rd funcs index      false                   return     CONTINUE                  IF setTimeout IS ALREADY SET  THAT MEANS THAT WE SHOULD RESET IT BECAUSE ITS CALLED BEFORE DURATION TIME EXPIRES             if  rd funcs index  timeout     false                   clearTimeout  rd funcs index  timeout                    SET NEW TIMEOUT BY RESPECTING DURATION TIME             rd funcs index  timeout   setTimeout  rd funcs index  func  rd funcs index  delay                                   lt  lt  lt  THIS PART RUNS ONLY ONCE - RIGHT NOW         RETURN THE FUNCTION WHICH JQUERY SHOULD USE WHEN jQuery window  resizeDelayed      IS CALLED     return function  func or false  delay or id  id                FIRST PARAM SHOULD BE SET          if  typeof func or false     undefined                  console log   jQuery window  resizeDelayed      REQUIRES AT LEAST 1 PARAMETER                  return this     RETURN JQUERY OBJECT                        SHOULD WE DELETE THE EXISTING FUNCTION S  INSTEAD OF CREATING A NEW ONE          if  func or false    false                    DELETE ALL REGISTERED FUNCTIONS              if  typeof delay or id     undefined                         CLEAR ALL setTimeout s FIRST                 foreachResizeFunction function index                        if  typeof rd funcs index      undefined   amp  amp  rd funcs index  timeout     false                           clearTimeout  rd funcs index  timeout                                          rd funcs                        return this     RETURN JQUERY OBJECT                               DELETE ONLY THE FUNCTION WITH SPECIFIC ID              else if  typeof rd funcs delay or id      undefined                         CLEAR setTimeout FIRST                 if  rd funcs delay or id  timeout     false                       clearTimeout  rd funcs delay or id  timeout                     rd funcs delay or id    false                   return this     RETURN JQUERY OBJECT                                       NOW  FIRST PARAM MUST BE THE FUNCTION         if  typeof func or false     function                return this     RETURN JQUERY OBJECT             SET THE DEFAULT DELAY TIME IF ITS NOT ALREADY SET         if  typeof delay or id     undefined     isNaN delay or id                delay or id   500              SET THE DEFAULT ID IF ITS NOT ALREADY SET         if  typeof id     undefined                id   rd counter              ADD NEW FUNCTION TO RESIZE EVENT         rd funcs id                  func   func or false              delay  delay or id              timeout   false                     rd counter             return this     RETURN JQUERY OBJECT

User · Answer

Actually  as I know  you can t do some actions exactly when resize is off  simply because you don t know future user s actions  But you can assume the time passed between two resize events  so if you wait a little more than this time and no resize is made  you can call your function  Idea is that we use setTimeout and it s id in order to save or delete it  For example we know that time between two resize events is 500ms  therefore we will wait 750ms    x000D   x000D  var a  x000D    window  resize function    x000D    clearTimeout a   x000D    a   setTimeout function    x000D         call your function x000D      750   x000D      x000D   x000D   x000D

User · Answer

I use the following function for delaying repeated actions  it will work for your case   var delay    function      var timer   0    return function callback  ms       clearTimeout  timer       timer   setTimeout callback  ms                Usage     window  resize function         delay function          alert  Resize                          500         The callback function passed to it  will execute only when the last call to delay has been made after the specified amount of time  otherwise a timer will be reset  I find this useful for other purposes like detecting when the user stopped typing  etc

User · Answer

Some of the previously mentioned solutions did not work for me  even though they are of more general usage  Alternatively I ve found this one that did the job on window resize     window  bind  resize   function e       window resizeEvt        window  resize function            clearTimeout window resizeEvt           window resizeEvt   setTimeout function              code to do after window is resized            250

User · Answer

Here s a modification of CMS s solution that can be called in multiple places in your code   var waitForFinalEvent    function        var timers         return function  callback  ms  uniqueId        if   uniqueId          uniqueId    Don t call this twice without a uniqueId             if  timers uniqueId           clearTimeout  timers uniqueId              timers uniqueId    setTimeout callback  ms                Usage     window  resize function          waitForFinalEvent function          alert  Resize                          500   some unique string          CMS s solution is fine if you only call it once  but if you call it multiple times  e g  if different parts of your code set up separate callbacks to window resizing  then it will fail b c they share the timer variable     With this modification  you supply a unique id for each callback  and those unique IDs are used to keep all the timeout events separate

User · Answer

I prefer to create an event     window  bind  resizeEnd   function           do something  window hasn t changed size in 500ms       Here is how you create it      window  resize function             if this resizeTO  clearTimeout this resizeTO           this resizeTO   setTimeout function                   this  trigger  resizeEnd               500             You could have this in a global javascript file somewhere

[javascript] JavaScript/JQuery: $(window).resize how to fire AFTER the resize is completed?

Examples related to javascript

Examples related to jquery