How to wait for the end of resize event and only then perform an action

Question

So I currently use something like     window  resize function   resizedw         But this gets called many times while resizing process goes on  Is it possible to catch an event when it ends

User · Answer

This is the code that I write according to @Mark Coleman answer:

$(window).resize(function() {
    clearTimeout(window.resizedFinished);
    window.resizedFinished = setTimeout(function(){
        console.log('Resized finished.');
    }, 250);
});

Thanks Mark!

User · Answer

This is a modification to Dolan s code above  I ve added a feature which checks the window size at the start of the resize and compares it to the size at the end of the resize  if size is either bigger or smaller than the margin  eg  1000  then it reloads   var rtime   new Date 1  1  2000  12 00 00   var timeout   false  var delta   200  var windowsize    window width    var windowsizeInitial    window width       window  on  resize  function         windowsize    window width        rtime   new Date        if  timeout     false                timeout   true              setTimeout resizeend  delta                  function resizeend     if  new Date   - rtime  lt  delta        setTimeout resizeend  delta       return false    else           if  windowsizeInitial  gt  1000  amp  amp  windowsize  gt  1000                 setTimeout resizeend  delta               return false                    if  windowsizeInitial  lt  1001  amp  amp  windowsize  lt  1001                 setTimeout resizeend  delta               return false            else               timeout   false              location reload                        windowsizeInitial    window width        return false

User · Answer

i wrote a litte wrapper function on my own     onResize      function fn        if  fn    typeof fn     function           return 0       var args      Array prototype slice call arguments  1        onResize fnArr      onResize fnArr            onResize fnArr push  fn  args         onResize loop     function               each onResize fnArr  function index  fnWithArgs                fnWithArgs 0  apply undefined  fnWithArgs 1                              window  on  resize   function e            window clearTimeout onResize timeout           onResize timeout      window setTimeout  onResize loop      300                Here is the usage   var testFn    function arg1  arg2        console log   testFn  arg1    arg1       console log   testFn  arg2    arg2          document ready   function         onResize testFn   argument1    argument2

User · Answer

There is an elegant solution using the Underscore js So  if you are using it in your project you can do the following -     window   resize    debounce  resizedw  500          This should be enough    But  If you are interested to read more on that  you can check my blog post - http   rifatnabi com post detect-end-of-jquery-resize-event-using-underscore-debounce deadlink

User · Answer

Internet Explorer provides a resizeEnd event  Other browsers will trigger the resize event many times while you re resizing   There are other great answers here that show how to use setTimeout and the  throttle   debounce methods from lodash and underscore  so I will mention Ben Alman s throttle-debounce jQuery plugin which accomplishes what you re after   Suppose you have this function that you want to trigger after a resize   function onResize       console log  Resize just happened          Throttle Example In the following example  onResize   will only be called once every 250 milliseconds during a window resize     window  resize    throttle  250  onResize       Debounce Example In the following example  onResize   will only be called once at the end of a window resizing action  This achieves the same result that  Mark presents in his answer     window  resize    debounce  250  onResize

User · Answer

this worked for me as I did not want to use any plugins     window  resize function         var originalWindowSize   0      var currentWidth   0       var setFn   function              originalWindowSize     window  width                var checkFn   function              setTimeout function                  currentWidth     window  width                if  currentWidth     originalWindowSize                    console info  same    yes                       execute code                else                   console info  same    no                        do nothing                           500             setFn        checkFn          On window re-size invoke  setFn  which gets width of window and save as  originalWindowSize   Then invoke  checkFn  which after 500ms  or your preference  gets the current window size  and compares the original to the current  if they are not the same  then the window is still being re-sized  Don t forget to remove console messages in production  and  optional  can make  setFn  self executing

User · Answer

var resizeTimer     window   resize function         if resizeTimer           clearTimeout resizeTimer             resizeTimer   setTimeout function               your code here         resizeTimer   null             200             This worked for what I was trying to do in chrome  This won t fire the callback until 200ms after last resize event

User · Answer

Here is VERY simple script to trigger both a  resizestart  and  resizeend  event on the window object   There is no need to muck around with dates and times   The d variable represents the number of milliseconds between resize events before triggering the resize end event  you can play with this to change how sensitive the end event is   To listen to these events all you need to do is   resizestart    window  on  resizestart   function event  console log  Resize Start         resizeend    window  on  resizeend   function event  console log  Resize End          function           var d   250  t   null  e   null  h  r   false       h   function              r   false            window  trigger  resizeend   e                 window  on  resize   function  event            e   event    e          clearTimeout t            if   r                  window  trigger  resizestart   e               r   true                     t   setTimeout h  d             jQuery

User · Answer

This is what I use for delaying repeated actions  it can be called in multiple places in your code   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               Usage     window  resize function          debounce function                            500

User · Answer

I had luck with the following recommendation  http   forum jquery com topic the-resizeend-event  Here s the code so you don t have to dig through his post s link  amp  source   var rtime  var timeout   false  var delta   200    window  resize function         rtime   new Date        if  timeout     false            timeout   true          setTimeout resizeend  delta              function resizeend         if  new Date   - rtime  lt  delta            setTimeout resizeend  delta         else           timeout   false          alert  Done resizing                             Thanks sime vidas for the code

User · Answer

There is a much simpler method to execute a function at the end of the resize than calculate the delta time between two calls  simply do it like this    var resizeId    window  resize function         clearTimeout resizeId       resizeId   setTimeout resizedEnded  500        function resizedEnded                And the equivalent for Angular2    private resizeId   HostListener  window resize      event    onResized event  Event      clearTimeout this resizeId     this resizeId   setTimeout      gt           Your callback method here       500       For the angular method  use the      gt      notation in the setTimeout to preserve the scope  otherwise you will not be able to make any function calls or use this

User · Answer

since the selected answer didn t actually work    and if you re not using jquery here is a simple throttle function with an example of how to use it with window resizing      function throttle end delta         var base   this       base wait   false      base delta   200      base end   end       base trigger   function context               only allow if we aren t waiting for another event         if    base wait                    signal we already have a resize event             base wait   true                 if we are trying to resize and we              setTimeout function                        call the end function                 if base end  base end call context                      reset the resize trigger                 base wait   false                 base delta                       var windowResize   new throttle function    console log  throttle resize     200    window onresize   function event        windowResize trigger

User · Answer

I don t know is my code work for other but it s really do a great job for me  I got this idea by analyzing Dolan Antenucci code because his version is not work for me and I really hope it ll be helpful to someone   var tranStatus   false    window  resizeend 200  function            cat-name   category   removeAttr  style          clearTimeout homeResize              one  webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend  function event          tranStatus   true              processResize         function processResize      homeResize   setInterval function        if tranStatus   false           console log  not yet                   one  webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend  function event                tranStatus   true                    else          text height            clearInterval homeResize             200

User · Answer

You can store a reference id to any setInterval or setTimeout  Like this   var loop   setInterval func  30       some time later clear the interval clearInterval loop     To do this without a  global  variable you can add a local variable to the function itself  Ex     window  resize function         clearTimeout this id       this id   setTimeout doneResizing  500        function doneResizing         body   append   lt br  gt done

User · Answer

ResizeStart and ResizeEnd events for window  http   jsfiddle net 04fLy8t4   I implemented function which trig two events on user DOM element    resizestart resizeend   Code   var resizeEventsTrigger    function          function triggerResizeStart  el             el trigger  resizestart            isStart    isStart             function triggerResizeEnd  el            clearTimeout timeoutId           timeoutId   setTimeout function                   el trigger  resizeend                isStart    isStart             delay              var isStart   true      var delay   200      var timeoutId       return function   el            isStart   triggerResizeStart  el    triggerResizeEnd  el                      my   on  resizestart   function          console log  resize start            my   on  resizeend   function          console log  resize end         window onresize   function          resizeEventsTrigger      my

User · Answer

var flag true  var timeloop     window  resize function        rtime new Date        if flag           flag false          timeloop setInterval function                if new Date  -rtime gt 100                  myAction              100            function myAction        clearInterval timeloop       flag true        any other code

User · Answer

I wrote a function that passes a function when wrapped in any resize event  It uses an interval so that the resize even isn t constantly creating timeout events  This allows it to perform independently of the resize event other than a log entry that should be removed in production    https   github com UniWrighte resizeOnEnd blob master resizeOnEnd js            window  resize function                  call to resizeEnd function to execute function on resize end        can be passed as function name or anonymous function             resizeEnd function                                       global variables for reference outside of interval         var interval   null          var width     window  width        var numi   0    can be removed in production         function resizeEnd functionCall                 check for null interval             if  interval                     set to new interval                 interval   setInterval function              get width to compare                     width2     window  width              if stored width equals new width                     if width     width2                             clear interval  set to null  and call passed function                         clearInterval interval                           interval   null    precaution                         functionCall                                     set width to compare on next interval after half a second                     width     window  width                       500                 else                    logging that should be removed in production                 console log  function call     numi       and inteval set skipped

User · Answer

UPDATE   Better alternative also created by me is here  https   stackoverflow com a 23692008 2829600  supports  delete functions    ORIGINAL POST   I wrote this simple function for handling delay in execution  useful inside jQuery  scroll   and  resize   So callback f will run only once for specific id string   function delay exec  id  wait time  callback f            IF WAIT TIME IS NOT ENTERED IN FUNCTION CALL         SET IT TO DEFAULT VALUE  0 5 SECOND     if  typeof wait time      undefined            wait time   500          CREATE GLOBAL ARRAY IF ITS NOT ALREADY CREATED         WHERE WE STORE CURRENTLY RUNNING setTimeout   FUNCTION FOR THIS ID     if  typeof window  delay exec        undefined            window  delay exec                 RESET CURRENTLY RUNNING setTimeout   FUNCTION FOR THIS ID         SO IN THAT WAY WE ARE SURE THAT callback f WILL RUN ONLY ONE TIME          ON LATEST CALL ON delay exec FUNCTION WITH SAME ID        if  typeof window  delay exec   id       undefined            clearTimeout  window  delay exec   id             SET NEW TIMEOUT AND EXECUTE callback f WHEN wait time EXPIRES         BUT ONLY IF THERE ISNT ANY MORE FUTURE CALLS   IN wait time PERIOD          TO delay exec FUNCTION WITH SAME ID AS CURRENT ONE     window  delay exec   id    setTimeout  callback f   wait time           USAGE  jQuery window  resize function          delay exec  test1   1000  function            console log  1st call to delay  test1  successfully executed                  delay exec  test1   1000  function            console log  2nd call to delay  test1  successfully executed                  delay exec  test1   1000  function            console log  3rd call to delay  test1  successfully executed                  delay exec  test2   1000  function            console log  1st call to delay  test2  successfully executed                  delay exec  test3   1000  function            console log  1st call to delay  test3  successfully executed                      RESULT 3rd call to delay  test1  successfully executed  1st call to delay  test2  successfully executed  1st call to delay  test3  successfully executed

User · Answer

Well  as far as the window manager is concerned  each resize event is its own message  with a distinct beginning and end  so technically  every time the window is resized  it is the end   Having said that  maybe you want to set a delay to your continuation  Here s an example   var t   -1  function doResize         document write  resize        document  ready function          window  resize function            clearTimeout t           t   setTimeout doResize  1000

User · Answer

Mark Coleman s answer is certainly far better than the selected answer  but if you want to avoid the global variable for the timeout ID  the doit variable in Mark s answer   you could do one of the following    1  Use a an immediately invoked function expression  IIFE  to create a closure     window  resize  function        This function is immediately invoked                                   and returns the closure function      var timeoutId      return function             clearTimeout timeoutId           timeoutId   setTimeout function                 timeoutId   null     You could leave this line out                 Code to execute on resize goes here             100                    2  Use a property of the event handler function     window  resize function         var thisFunction   arguments callee      clearTimeout thisFunction timeoutId       thisFunction timeoutId   setTimeout function             thisFunction timeoutId   null     You could leave this line out             Code to execute on resize goes here         100

User · Answer

You can use setTimeout   and clearTimeout    function resizedw           Haven t resized in 100ms     var doit  window onresize   function      clearTimeout doit     doit   setTimeout resizedw  100        Code example on jsfiddle

User · Answer

function        var special   jQuery event special          uid1    D      new Date             uid2    D      new Date     1        special resizestart             setup  function                 var timer                  handler    function evt                        var  self   this                           args   arguments                      if  timer                            clearTimeout timer                         else                           evt type    resizestart                           jQuery event handle apply  self   args                                              timer   setTimeout  function                            timer   null                         special resizestop latency                                  jQuery this  bind  resize   handler  data uid1  handler                      teardown  function                jQuery this  unbind   resize   jQuery this  data uid1                           special resizestop             latency  200          setup  function                 var timer                  handler   function evt                        var  self   this                           args   arguments                      if  timer                            clearTimeout timer                                             timer   setTimeout  function                            timer   null                          evt type    resizestop                           jQuery event handle apply  self   args                          special resizestop latency                                   jQuery this  bind  resize   handler  data uid2  handler                      teardown  function                 jQuery this  unbind   resize   jQuery this  data uid2                               window  bind  resizestop  function

User · Answer

One solution is extend jQuery with a function  e g   resized    fn resized   function  callback  timeout          this  resize function              var  this     this           if   this data  resizeTimeout                  clearTimeout  this data  resizeTimeout                        this data  resizeTimeout   setTimeout callback  timeout                 Sample usage      window  resized myHandler  300

User · Answer

You can use setTimeout   and clearTimeout   in conjunction with jQuery data     window  resize function         clearTimeout   data this   resizeTimer           data this   resizeTimer   setTimeout function               do something         alert  Haven t resized in 200ms            200          Update  I wrote an extension to enhance jQuery s default on   amp  bind -event-handler  It attaches an event handler function for one or more events to the selected elements if the event was not triggered for a given interval  This is useful if you want to fire a callback only after a delay  like the resize event  or else  https   github com yckart jquery unevent js    function           var methods     on    fn on  bind    fn bind          each methods  function k             fn k    function                  var args      slice call arguments                   delay   args pop                    fn   args pop                    timer               args push function                      var self   this                      arg   arguments                  clearTimeout timer                   timer   setTimeout function                        fn apply self     slice call arg                       delay                                return methods k  apply this  isNaN delay    arguments   args                        jQuery      Use it like any other on or bind-event handler  except that you can pass an extra parameter as a last     window  on  resize   function e        console log e type    -event was 200ms not triggered       200     http   jsfiddle net ARTsinn EqqHx

[javascript] How to wait for the 'end' of 'resize' event and only then perform an action?

Examples related to javascript

Examples related to jquery

Examples related to html

Examples related to resize

Examples related to jquery-events