[JQUERY] JQuery와 : 어떻게이 완료 크기 조정의 번만 RESIZE 이벤트 호출하려면?

JQuery와 : 어떻게이 완료 크기 조정의 번만 RESIZE 이벤트 호출하려면?

해결법

1. ---

   1.여기 thejh의 지침을 사용하여 예입니다

   여기 thejh의 지침을 사용하여 예입니다

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

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

2. ---

   2.디 바운스.

   디 바운스.

   function debouncer( func , timeout ) {
      var timeoutID , timeout = timeout || 200;
      return function () {
         var scope = this , args = arguments;
         clearTimeout( timeoutID );
         timeoutID = setTimeout( function () {
             func.apply( scope , Array.prototype.slice.call( args ) );
         } , timeout );
      }
   }
   
   
   $( window ).resize( debouncer( function ( e ) {
       // do stuff 
   } ) );
   

   참고, 당신은 당신이 (키 이벤트 등) 진동을 소거 할 아무것도이 방법을 사용할 수 있습니다.

   최적의 원하는 효과에 대한 시간 제한 파라미터를 조정할.

3. ---

   3.당신은 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/

4. ---

   4.

   var lightbox_resize = false;
   $(window).resize(function() {
       console.log(true);
       if (lightbox_resize)
           clearTimeout(lightbox_resize);
       lightbox_resize = setTimeout(function() {
           console.log('resize');
       }, 500);
   });
   

5. ---

   5.바로 위에 추가, 그것 때문에에 밖으로, 여기에 방지 할 수있는 몇 가지 코드가 터지는 스크롤 막대의 원치 않는 크기 조정 이벤트를 취득하는 것이 일반적입니다 :

   바로 위에 추가, 그것 때문에에 밖으로, 여기에 방지 할 수있는 몇 가지 코드가 터지는 스크롤 막대의 원치 않는 크기 조정 이벤트를 취득하는 것이 일반적입니다 :

   function registerResize(f) {
       $(window).resize(function() {
           clearTimeout(this.resizeTimeout);
           this.resizeTimeout = setTimeout(function() {
               var oldOverflow = document.body.style.overflow;
               document.body.style.overflow = "hidden";
               var currHeight = $(window).height(),
                   currWidth = $(window).width();
               document.body.style.overflow = oldOverflow;
   
               var prevUndefined = (typeof this.prevHeight === 'undefined' || typeof this.prevWidth === 'undefined');
               if (prevUndefined || this.prevHeight !== currHeight || this.prevWidth !== currWidth) {
                   //console.log('Window size ' + (prevUndefined ? '' : this.prevHeight + "," + this.prevWidth) + " -> " + currHeight + "," + currWidth);
                   this.prevHeight = currHeight;
                   this.prevWidth = currWidth;
   
                   f(currHeight, currWidth);
               }
           }, 200);
       });
       $(window).resize(); // initialize
   }
   
   registerResize(function(height, width) {
       // this will be called only once per resize regardless of scrollbars changes
   });
   

   jsfiddle 참조

6. ---

   6.스로틀 및 디 바운스 : Underscore.js이 작업을위한 훌륭한 방법을 제공합니다. 당신은 밑줄을 사용하지 않는 경우에도 이러한 기능의 소스를보십시오. 다음은 그 예이다 :

   스로틀 및 디 바운스 : Underscore.js이 작업을위한 훌륭한 방법을 제공합니다. 당신은 밑줄을 사용하지 않는 경우에도 이러한 기능의 소스를보십시오. 다음은 그 예이다 :

   var redraw = function() {'redraw logic here'};
   var debouncedRedraw = _.debounce(redraw, 750);
   $(window).on('resize', debouncedRedraw);
   

7. ---

   7.이것은 나의 접근 방식입니다 :

   이것은 나의 접근 방식입니다 :

   document.addEventListener('DOMContentLoaded', function(){
       var tos = {};
       var idi = 0;
       var fn  = function(id)
       {
           var len = Object.keys(tos).length;
   
           if(len == 0)
               return;
   
           to = tos[id];
           delete tos[id];
   
           if(len-1 == 0)
               console.log('Resize finished trigger');
       };
   
       window.addEventListener('resize', function(){
           idi++;
           var id = 'id-'+idi;
           tos[id] = window.setTimeout(function(){fn(id)}, 500);
       });
   });
   

   리사이즈 이벤트 리스너가 수신되는 모든 치수 호출을 잡는 각 타임 아웃 기능을 만들고 'ID-'가 앞에 붙은 순회 번호와 함께 제한 식별자를 저장하는 TOS - 배열 (배열의 키로서 사용할 수)이다.

   마다 timout 트리거는, 그 TOS는 배열의 마지막 타임 아웃 인 경우 검사 (는 fn 기능마다 실행 timout를 삭제) 것을 상기 FN-함수를 호출한다. 참 (= 경우는 LEN (1 == 0)), 크기 조정이 종료되는 경우.

8. ---

   8.jQuery를 이벤트 핸들러를 제거하는 오프 방법을 제공

   jQuery를 이벤트 핸들러를 제거하는 오프 방법을 제공

   $(window).resize(function(){
       if(magic == true) {
           $(window).off('resize', arguments.callee);
       }
   });
   

from https://stackoverflow.com/questions/4298612/jquery-how-to-call-resize-event-only-once-its-finished-resizing by cc-by-sa and MIT license