[JQUERY] 자바 스크립트 / JQuery와 : $ (창) 크기 조정이 완료된 후 어떻게 화재 .resize?

자바 스크립트 / JQuery와 : $ (창) 크기 조정이 완료된 후 어떻게 화재 .resize?

해결법

1. ---

   1.여기에 코드의 여러 위치에서 호출 할 수있는 CMS의 솔루션의 수정이다 :

   여기에 코드의 여러 위치에서 호출 할 수있는 CMS의 솔루션의 수정이다 :

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

   용법:

   $(window).resize(function () {
       waitForFinalEvent(function(){
         alert('Resize...');
         //...
       }, 500, "some unique string");
   });
   

   당신이 한 번만를 호출하는 경우 CMS의 솔루션은 괜찮지 만, 여러 번, 예를 호출하는 경우 코드의 다른 부분은 창 크기 조정에 대한 별도의 콜백을 설정 한 경우 타이머 변수를 공유 c를, 그것은 / B를 실패합니다.

   이 수정을 사용하면 각 콜백에 대한 고유 ID를 제공하고, 그 고유 ID는 이벤트가 별도의 모든 시간 제한을 유지하는 데 사용됩니다.

2. ---

   2.나는 이벤트를 만들 것을 선호 :

   나는 이벤트를 만들 것을 선호 :

   $(window).bind('resizeEnd', function() {
       //do something, window hasn't changed size in 500ms
   });
   

   여기 당신이 그것을 만드는 방법은 다음과 같습니다

    $(window).resize(function() {
           if(this.resizeTO) clearTimeout(this.resizeTO);
           this.resizeTO = setTimeout(function() {
               $(this).trigger('resizeEnd');
           }, 500);
       });
   

   당신은 글로벌 자바 스크립트 파일 곳이있을 수 있습니다.

3. ---

   3.나는 반복 작업을 지연하기위한 다음과 같은 기능을 사용하여, 당신의 경우에 작동합니다 :

   나는 반복 작업을 지연하기위한 다음과 같은 기능을 사용하여, 당신의 경우에 작동합니다 :

   var delay = (function(){
     var timer = 0;
     return function(callback, ms){
       clearTimeout (timer);
       timer = setTimeout(callback, ms);
     };
   })();
   

   용법:

   $(window).resize(function() {
       delay(function(){
         alert('Resize...');
         //...
       }, 500);
   });
   

   전달 된 콜백 함수는 사용자 입력을 정지했을 때 등, 검출과 같은 다른 목적을 위해 유용한 찾기를 달리 타이머가 초기화되고, 지연에 대한 최근의 콜이 지정된 시간 이후에 만들어진 때만 실행할 ..

4. ---

   4.당신이 Underscore.js가 설치되어있는 경우, 당신은 할 수 :

   당신이 Underscore.js가 설치되어있는 경우, 당신은 할 수 :

   $(window).resize(_.debounce(function(){
       alert("Resized");
   },500));
   

5. ---

   5.앞서 언급 한 솔루션 중 일부는보다 일반적인 사용의 경우에도, 나를 위해 작동하지 않았다. 또한 나는 창 크기 조정에서 일을했다이 하나를 발견했습니다 :

   앞서 언급 한 솔루션 중 일부는보다 일반적인 사용의 경우에도, 나를 위해 작동하지 않았다. 또한 나는 창 크기 조정에서 일을했다이 하나를 발견했습니다 :

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

6. ---

   6.데이비드 월시에 많은 감사합니다, 여기에 밑줄 디 바운스의 바닐라 버전입니다.

   데이비드 월시에 많은 감사합니다, 여기에 밑줄 디 바운스의 바닐라 버전입니다.

   암호:

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

   간단한 사용법 :

   var myEfficientFn = debounce(function() {
       // All the taxing stuff you do
   }, 250);
   
   $(window).on('resize', myEfficientFn);
   

   참조 : http://davidwalsh.name/javascript-debounce-function

7. ---

   7.내가 아는 한 크기 조정이 꺼져 정확히 향후 사용자의 행동을 모르는 간단하기 때문에 사실, 당신은 어떤 작업을 할 수 없습니다. 하지만 당신은이 시간보다 조금 더 기다려 더 크기 조정은, 당신이 당신의 함수를 호출 할 수 있습니다 이루어지지 않습니다 그렇다면,이 개 크기 조정 이벤트 사이에 전달되는 시간을 가정 할 수 있습니다. 아이디어는 우리가 저장하거나 삭제하기 위해에서는 setTimeout과의 ID를 사용한다는 것입니다. 예를 들어 우리는 그러므로 우리가 750ms를 기다리는 두 개의 크기 조정 이벤트 사이의 시간이 500ms로 알고있다.

   내가 아는 한 크기 조정이 꺼져 정확히 향후 사용자의 행동을 모르는 간단하기 때문에 사실, 당신은 어떤 작업을 할 수 없습니다. 하지만 당신은이 시간보다 조금 더 기다려 더 크기 조정은, 당신이 당신의 함수를 호출 할 수 있습니다 이루어지지 않습니다 그렇다면,이 개 크기 조정 이벤트 사이에 전달되는 시간을 가정 할 수 있습니다. 아이디어는 우리가 저장하거나 삭제하기 위해에서는 setTimeout과의 ID를 사용한다는 것입니다. 예를 들어 우리는 그러므로 우리가 750ms를 기다리는 두 개의 크기 조정 이벤트 사이의 시간이 500ms로 알고있다.

   VAR a를; $ (창) .resize (함수 () { 사항 clearTimeout (a); A =에서는 setTimeout (함수 () { 함수를 호출 // }, 750); });

8. ---

   8.전 세계적으로 지연 리스너를 선언합니다 :

   전 세계적으로 지연 리스너를 선언합니다 :

   var resize_timeout;
   
   $(window).on('resize orientationchange', function(){
       clearTimeout(resize_timeout);
   
       resize_timeout = setTimeout(function(){
           $(window).trigger('resized');
       }, 250);
   });
   

   그리고 크기가 조정 된 이벤트에 사용 리스너 아래에 당신이 원하는 :

   $(window).on('resized', function(){
       console.log('resized');
   });
   

9. ---

   9.그것은 나를 위해 작동합니다. https://alvarotrigo.com/blog/firing-resize-event-only-once-when-resizing-is-finished/ -이 솔루션을 참조하십시오

   그것은 나를 위해 작동합니다. https://alvarotrigo.com/blog/firing-resize-event-only-once-when-resizing-is-finished/ -이 솔루션을 참조하십시오

   VAR resizeId; $ (창) .resize (함수 () { 사항 clearTimeout (resizeId); resizeId =에서는 setTimeout (doneResizing, 500); }); doneResizing 함수 () { // 우리가 원하는대로 }

10. ---

    10.지연 창 크기 조정 이벤트에 대한 간단한 jQuery 플러그인.

    지연 창 크기 조정 이벤트에 대한 간단한 jQuery 플러그인.

    크기 조정 이벤트에 새로운 기능을 추가

    jQuery(window).resizeDelayed( func, delay, id ); // delay and id are optional
    

    (ID의 선언에 의해) 제거 기능을 추가 이전

    jQuery(window).resizeDelayed( false, id );
    

    모든 기능을 제거

    jQuery(window).resizeDelayed( false );
    

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

    사용법 출력 :

    first event - should run after 0.4 seconds
    newest event - should run after 0.5 second
    third event - should run after 3.0 seconds
    

    jQuery.fn.resizeDelayed = (function(){
    
        // >>> 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 );
    
            });
    
        });
    
        // <<< 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" && 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
    
        }
    
    })();
    

11. ---

    11.마우스 커서가 창 크기 조정 후 문서에 반환해야한다고 가정하면, 우리는 onMouseover와 이벤트와 콜백과 같은 동작을 만들 수 있습니다. 예상대로이 솔루션은 터치 사용 화면이 작동하지 않을 수 있음을 잊지 마십시오.

    마우스 커서가 창 크기 조정 후 문서에 반환해야한다고 가정하면, 우리는 onMouseover와 이벤트와 콜백과 같은 동작을 만들 수 있습니다. 예상대로이 솔루션은 터치 사용 화면이 작동하지 않을 수 있음을 잊지 마십시오.

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

12. ---

    12.이것은 내가 구현 한 것입니다 :

    이것은 내가 구현 한 것입니다 :

    $ (창) .resize (함수 () { 에서는 setTimeout (된 SomeFuncion, 500); });

    우리가 크기 조정은 500ms보다 적은 일이 예상되는 경우 우리는의 setTimeout을 취소 할 수 있습니다

    행운을 빕니다...

from https://stackoverflow.com/questions/2854407/javascript-jquery-window-resize-how-to-fire-after-the-resize-is-completed by cc-by-sa and MIT license