[JQUERY] 어떻게 '크기 조정'이벤트의 '끝'을 기다리는 만 다음 작업을 수행?

어떻게 '크기 조정'이벤트의 '끝'을 기다리는 만 다음 작업을 수행?

해결법

1. ---

   1.나는 다음과 같은 권고 운이 : http://forum.jquery.com/topic/the-resizeend-event

   나는 다음과 같은 권고 운이 : http://forum.jquery.com/topic/the-resizeend-event

   여기에 자신의 게시물의 링크 및 소스를 통해 발굴 할 필요가 없습니다 코드는 다음과 같습니다

   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 < delta) {
           setTimeout(resizeend, delta);
       } else {
           timeout = false;
           alert('Done resizing');
       }               
   }
   

   코드에 대한 감사 sime.vidas!

2. ---

   2.당신은 ()에서는 setTimeout () 및 사항 clearTimeout을 사용할 수 있습니다

   당신은 ()에서는 setTimeout () 및 사항 clearTimeout을 사용할 수 있습니다

   function resizedw(){
       // Haven't resized in 100ms!
   }
   
   var doit;
   window.onresize = function(){
     clearTimeout(doit);
     doit = setTimeout(resizedw, 100);
   };
   

   jsfiddle에 대한 코드 예제.

3. ---

   3.이것은 내가 @ 마크 콜맨 대답에 따라 작성하는 것이 코드입니다 :

   이것은 내가 @ 마크 콜맨 대답에 따라 작성하는 것이 코드입니다 :

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

   감사합니다 마크!

4. ---

   4.Internet Explorer에서 resizeEnd 이벤트를 제공합니다. 당신은 크기를 조정하는 동안 다른 브라우저 크기 조정 이벤트가 여러 번 트리거합니다.

   Internet Explorer에서 resizeEnd 이벤트를 제공합니다. 당신은 크기를 조정하는 동안 다른 브라우저 크기 조정 이벤트가 여러 번 트리거합니다.

   다른 큰 응답이 방법에서는 setTimeout과 .throttle를 사용하는 그 쇼가 여기에있다,

5. ---

   5.당신은 당신이 다음을 수행 할 수 있습니다 프로젝트에서 그것을 사용하는 경우, Underscore.js 그래서를 사용하여 우아한 해결책이 있습니다 -

   당신은 당신이 다음을 수행 할 수 있습니다 프로젝트에서 그것을 사용하는 경우, Underscore.js 그래서를 사용하여 우아한 해결책이 있습니다 -

   $( window ).resize( _.debounce( resizedw, 500 ) );
   

   이 충분해야합니다 :)하지만, 당신이 더 많은 것을에 읽을 관심이 있다면, 당신은 내 블로그 게시물을 확인하실 수 있습니다 - http://rifatnabi.com/post/detect-end-of-jquery-resize-event-using-underscore -debounce (deadlink)

6. ---

   6.하나 개의 솔루션은 기능, 예컨대으로 jQuery를 확장하는 것입니다 : 크기 조정

   하나 개의 솔루션은 기능, 예컨대으로 jQuery를 확장하는 것입니다 : 크기 조정

   $.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));
       });
   };
   

   샘플 사용 :

   (myHandler가, 300) .resized $ (창)

7. ---

   7.당신은 어떤하여 setInterval 또는에서는 setTimeout에 대한 참조 ID를 저장할 수 있습니다. 이 같이 :

   당신은 어떤하여 setInterval 또는에서는 setTimeout에 대한 참조 ID를 저장할 수 있습니다. 이 같이 :

   var loop = setInterval(func, 30);
   
   // some time later clear the interval
   clearInterval(loop);
   

   는 "글로벌"변수없이이 작업을 수행하려면 함수 자체에 로컬 변수를 추가 할 수 있습니다. 전의:

   $(window).resize(function() {
       clearTimeout(this.id);
       this.id = setTimeout(doneResizing, 500);
   });
   
   function doneResizing(){
     $("body").append("<br/>done!");   
   }
   

8. ---

   8.당신은 jQuery.data와 함께에서는 setTimeout () 및 사항 clearTimeout ()를 사용할 수 있습니다 :

   당신은 jQuery.data와 함께에서는 setTimeout () 및 사항 clearTimeout ()를 사용할 수 있습니다 :

   $(window).resize(function() {
       clearTimeout($.data(this, 'resizeTimer'));
       $.data(this, 'resizeTimer', setTimeout(function() {
           //do something
           alert("Haven't resized in 200ms!");
       }, 200));
   });
   

   최신 정보

   나는 (바인드) -event 핸들러에 jQuery의 기본을 향상시키기 위해 확장을 썼다. 이 이벤트가 지정된 간격 동안 트리거되지 않은 경우 선택한 요소에 하나 개 이상의 이벤트에 대한 이벤트 핸들러 함수를 연결합니다. 당신이 resize 이벤트, 또는 다른 사람처럼, 오직 지연 후에 콜백을 발사하려는 경우에 유용합니다. 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));
   

   또는 바인드 이벤트 핸들러 다른처럼 사용하여, 당신이 마지막으로 추가 매개 변수를 전달할 수 있다는 점을 제외하고 :

   $(window).on('resize', function(e) {
       console.log(e.type + '-event was 200ms not triggered');
   }, 200);
   

   http://jsfiddle.net/ARTsinn/EqqHx/

9. ---

   9.계산보다 크기 조정 두 통화 사이의 델타 시간의 끝에서 함수를 실행하는 데 훨씬 더 간단한 방법이 있습니다, 단순히 이런 식으로 작업을 수행합니다

   계산보다 크기 조정 두 통화 사이의 델타 시간의 끝에서 함수를 실행하는 데 훨씬 더 간단한 방법이 있습니다, 단순히 이런 식으로 작업을 수행합니다

   var resizeId;
   $(window).resize(function() {
       clearTimeout(resizeId);
       resizeId = setTimeout(resizedEnded, 500);
   });
   
   function resizedEnded(){
       ...
   }
   

   그리고 Angular2에 대해 동등한 :

   private resizeId;
   @HostListener('window:resize', ['$event'])
   onResized(event: Event) {
     clearTimeout(this.resizeId);
     this.resizeId = setTimeout(() => {
       // Your callback method here.
     }, 500);
   }
   

   각 방법의 경우, 그렇지 않으면 당신은 어떤 함수 호출을하거나이를 사용할 수 없습니다, 범위를 유지에서는 setTimeout의 () => {} 표기법을 사용합니다.

10. ---

    10.이것은 내가하는 검사 크기 조정의 시작에서 창 크기 기능을 추가 한, 위의 고언의 코드를 수정하고 크기가 마진보다 하나 크거나 작은 경우 (즉, 크기 조정의 끝에서 크기와 비교 예. 1000) 다음은 다시로드합니다.

    이것은 내가하는 검사 크기 조정의 시작에서 창 크기 기능을 추가 한, 위의 고언의 코드를 수정하고 크기가 마진보다 하나 크거나 작은 경우 (즉, 크기 조정의 끝에서 크기와 비교 예. 1000) 다음은 다시로드합니다.

    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 < delta) {
        setTimeout(resizeend, delta);
        return false;
    } else {
            if (windowsizeInitial > 1000 && windowsize > 1000 ) {
                setTimeout(resizeend, delta);
                return false;
            }
            if (windowsizeInitial < 1001 && windowsize < 1001 ) {
                setTimeout(resizeend, delta);
                return false;
            } else {
                timeout = false;
                location.reload();
            }
        }
        windowsizeInitial = $window.width();
        return false;
    }
    

11. ---

    11.마크 콜먼의 대답은 선택한 답변보다 훨씬 더 확실하게,하지만 당신은 시간 제한 ID (마크의 대답에 작은 동전 변수), 당신은 다음 중 하나를 수행 할 수 있습니다에 대한 전역 변수를 피하려는 경우 :

    마크 콜먼의 대답은 선택한 답변보다 훨씬 더 확실하게,하지만 당신은 시간 제한 ID (마크의 대답에 작은 동전 변수), 당신은 다음 중 하나를 수행 할 수 있습니다에 대한 전역 변수를 피하려는 경우 :

    (1) 폐쇄를 만들 즉시 호출 함수 표현식 (인생)을 사용합니다.

    $(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) 이벤트 핸들러 함수의 속성을 사용합니다.

    $(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);
    });
    

12. ---

    12.나는 내 자신에 약간의 래퍼 함수를 ​​쓴 ...

    나는 내 자신에 약간의 래퍼 함수를 ​​쓴 ...

    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);
        });
    };
    

    여기에 사용법은 다음과 같습니다

    var testFn  = function(arg1, arg2) {
        console.log('[testFn] arg1: '+arg1);
        console.log('[testFn] arg2: '+arg2);
    };
    
    // document ready
    $(function() {
        onResize(testFn, 'argument1', 'argument2');
    });
    

13. ---

    13.

    (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(){
        //...
    });
    

14. ---

    14.그럼, 지금까지의 윈도우 매니저에 관한 한, 각 resize 이벤트는 자신의 메시지는 너무 기술적으로 창 크기를 조정할 때마다, 그것은 끝, 별개의 시작과 끝입니다.

    그럼, 지금까지의 윈도우 매니저에 관한 한, 각 resize 이벤트는 자신의 메시지는 너무 기술적으로 창 크기를 조정할 때마다, 그것은 끝, 별개의 시작과 끝입니다.

    어쩌면 당신은 당신의 계속에 지연을 설정할 가졌어요? 다음은 예입니다.

    var t = -1;
    function doResize()
    {
        document.write('resize');
    }
    $(document).ready(function(){
        $(window).resize(function(){
            clearTimeout(t);
            t = setTimeout(doResize, 1000);
        });
    });
    

15. ---

    15.여기에 'resizestart'과 윈도우 객체에 'resizeend'이벤트 모두를 트리거하는 아주 간단한 스크립트입니다.

    여기에 'resizestart'과 윈도우 객체에 'resizeend'이벤트 모두를 트리거하는 아주 간단한 스크립트입니다.

    날짜와 시간에 주위를 깨끗이 할 필요가 없습니다.

    는 D 변수가 크기 조정 종료 이벤트를 트리거하기 전에 크기 조정 이벤트 사이의 밀리 세컨드 수를 나타냅니다, 당신은 종료 이벤트가 얼마나 민감한 변경하려면이 함께 재생할 수 있습니다.

    당신이 할 필요가있다 이러한 이벤트를 수신하려면 :

    resizestart : $ (창) CSTE 연구진 ( 'resizestart', 기능 (이벤트) {을 console.log ( '! 크기 조정 시작');});

    resizeend : $ (창) CSTE 연구진 ( 'resizeend', 기능 (이벤트) {을 console.log ( '크기 조정 끝!');});

    (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));
    

16. ---

    16.이것은,이 코드의 여러 위치에서 호출 할 수있는 내가 반복 작업을 지연하는 데 사용할 수 있습니다 :

    이것은,이 코드의 여러 위치에서 호출 할 수있는 내가 반복 작업을 지연하는 데 사용할 수 있습니다 :

    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 && !timeout;
            clearTimeout(timeout);
            timeout = setTimeout(later, wait);
            if (callNow) func.apply(context, args);
        };
    };
    

    용법:

    $(window).resize(function () { 
       debounce(function() {
              //...
        }, 500);
    });
    

17. ---

    17.선택한 답변은 실제로 일을하지 않았다 .. 당신이 여기에 jQuery를 사용하지 않는 경우은 창 크기 조정과 함께 사용하는 방법에 대한 예 간단한 스로틀 기능이기 때문에

    선택한 답변은 실제로 일을하지 않았다 .. 당신이 여기에 jQuery를 사용하지 않는 경우은 창 크기 조정과 함께 사용하는 방법에 대한 예 간단한 스로틀 기능이기 때문에

        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();
    }
    

18. ---

    18.내가 어떤 플러그인을 사용하지 않았다 이것은 나를 위해 일했다.

    내가 어떤 플러그인을 사용하지 않았다 이것은 나를 위해 일했다.

    $(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();
    });
    

    윈도우의 폭을 얻는다 "setFn"호출 창을 다시 크기와 "originalWindowSize"다른 이름으로 저장. 다음은 500ms (또는 환경 설정) 후 현재 창 크기를 가져, 그들은 다음 창은 여전히 ​​재 크기되고있는이 아닌 동일한 경우, 현재의 원래 비교 "checkFn"호출합니다. 생산에 콘솔 메시지를 제거하고, (옵션) "setFn"자기가 실행 할 수 있습니다 잊지 마세요.

19. ---

    19.

    var resizeTimer;
    $( window ).resize(function() {
        if(resizeTimer){
            clearTimeout(resizeTimer);
        }
        resizeTimer = setTimeout(function() {
            //your code here
            resizeTimer = null;
            }, 200);
        });
    

    이것은 내가 크롬에서 일을하려고 무슨 일했다. 이는 지난 resize 이벤트 후 200 밀리 초까지 콜백을 발생하지 않습니다.

20. ---

    20.또한 내게로 만든 더 나은 대안은 여기에 있습니다 : https://stackoverflow.com/a/23692008/2829600 (지원 "삭제 기능")

    또한 내게로 만든 더 나은 대안은 여기에 있습니다 : https://stackoverflow.com/a/23692008/2829600 (지원 "삭제 기능")

    내가 실행의 지연을 처리하기 위해이 간단한 함수를 작성, 유용한 내부 jQuery를 .scroll ()와 .resize () callback_f 한 번만 특정 ID 문자열에 대한 실행됩니다 그래서.

    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!
    */
    

21. ---

    21.http://jsfiddle.net/04fLy8t4/

    http://jsfiddle.net/04fLy8t4/

    나는 사용자 DOM 요소의 두 가지 이벤트를 삼각 함수를 구현 :

    암호:

    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") );
    };
    

22. ---

    22.

    var flag=true;
    var timeloop;
    
    $(window).resize(function(){
        rtime=new Date();
        if(flag){
            flag=false;
            timeloop=setInterval(function(){
                if(new Date()-rtime>100)
                    myAction();
            },100);
        }
    })
    function myAction(){
        clearInterval(timeloop);
        flag=true;
        //any other code...
    }
    

23. ---

    23.본인은 내 코드가 작동은 모르지만 정말 나를 위해 큰 일을 할 것. 나는 그의 버전은 나를 위해 일하지 않고 정말 누군가에게 도움이 될 것입니다 희망 때문에 고언 Antenucci 코드를 분석하여이 아이디어를 얻었다.

    본인은 내 코드가 작동은 모르지만 정말 나를 위해 큰 일을 할 것. 나는 그의 버전은 나를 위해 일하지 않고 정말 누군가에게 도움이 될 것입니다 희망 때문에 고언 Antenucci 코드를 분석하여이 아이디어를 얻었다.

    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);
    }
    

24. ---

    24.나는 어떤 resize 이벤트에 싸여 때 함수를 전달하는 기능을 썼다. 크기 조정도 지속적으로 타임 아웃 이벤트를 생성하지 않도록이 간격을 사용합니다. 이는 생산에서 제거되어야 로그 항목 이외 resize 이벤트 독립적으로 수행 할 수있다.

    나는 어떤 resize 이벤트에 싸여 때 함수를 전달하는 기능을 썼다. 크기 조정도 지속적으로 타임 아웃 이벤트를 생성하지 않도록이 간격을 사용합니다. 이는 생산에서 제거되어야 로그 항목 이외 resize 이벤트 독립적으로 수행 할 수있다.

    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");
    
                }
    

    }

from https://stackoverflow.com/questions/5489946/how-to-wait-for-the-end-of-resize-event-and-only-then-perform-an-action by cc-by-sa and MIT license