자바 스크립트 이벤트 폴링 빈도를 낮추십시오.

Question

어떻게 자바 스크립트 이벤트 폴링 빈도를 낮 춥니 까? 내가 우려하는 이벤트는 onResize과 onScroll입니다. 이러한 이벤트는 누군가 브라우저를 크기 조정하거나 아래로 스크롤 할 때 초당 수십 번 트리거 될 수 있습니다. 이 이벤트는 500ms마다 한 번만 발생하므로 이벤트 처리기를 최적화하고 메모리가 누출되지 않도록해야합니다. 사람이 크기 조정 완료 후

Answer 1

var resizeTimeout; 

window.onresize = function() { 
    if (resizeTimeout) { 
     clearTimeout(resizeTimeout); 
    } 
    resizeTimeout = setTimeout(function() { 
     // Do it! 
    }, 500); 

}); 

이것은 setTimeout() 기능 ~ 500ms 이내 트리거합니다.

는 onscroll 버전 당신은 정말 이벤트가 발생, 당신은 그것의 경우 확인 각 결과의 하나 다음, 첫 번째 이벤트 발사의 시간을 기억 뭔가를 할 수있는 방법을 자주 제어 할 수 없습니다 :

Answer 2

매우 유사하다 처음부터 500 밀리 초 이상 - 예인 경우 이벤트 처리기로 진행합니다. 그렇지 않으면 이벤트 처리기를 종료합니다.

Answer 3

핸들러 시작 부분에서 마지막 순간부터 500ms 경과했는지 확인하고 그렇지 않으면 돌아 오십시오.

Answer 4

이러한 이벤트가 실행되지 않도록 할 수는 없습니다. 그들은 항상 그렇습니다. 당신이하고 싶은 것은 즉시 듣기를 멈추고 반복을 피하기 위해 이벤트를 처리하는 것입니다. 그런 다음 setTimeout 후에 전체 핸들러가 다시 설정됩니다. 누군가 창의 크기를 변경하지 않으면 더 이상의 재귀가 발생하지 않습니다. 콘솔에서 작업하는 것이 더 쉽기 때문에 여기서 5000ms를 사용합니다. spaz처럼 크기를 조정하더라도 FF 콘솔에 5 초마다 하나 이상의 스팸이 표시되지 않아야합니다. 아무것도에게 핸들러 화재는 여전히 기술적으로 핸들러와 if 문 + 조회를 발사 할 때마다 작업을 수행할지 여부를 결정하는 로직을 사용하여

(function staggerListen(){ 
    window.onresize = function(){ 
    window.onresize = false; 
    console.log('spam'); 
    setTimeout(staggerListen,5000); 
    }; 
})() 

. 그것은 무겁게 될 수 있습니다.

Answer 5

체크 밑줄

가 작성 이후 밀리 초는 호출 된 마지막 시간 이후 경과 기다릴 때까지 실행을 연기한다 전달 기능의 새로운 디 바운스 버전을 반환 debounce 기능. 입력이 멈춘 후에 만 ​​발생해야하는 동작을 구현하는 데 유용합니다. 예 : Markdown 주석의 미리보기 렌더링, 창의 크기 조정이 중지 된 후 레이아웃 재 계산 등.

예 :

window.onscroll = _.debounce(
    function() { 
     // do something 
    }, 500, false 
); 

Answer 6

내가 허용 대답에처럼 만드는 데 사용하지만, 문제는 시간 제한이 지정된 후에 만 ​​트리거입니다. 지금 당장 리사이즈를 처리하는 솔루션이 필요했습니다. 여기 내가 끝낸 일이 있습니다.

var _resize_is_busy = false; 
var _resize_scheduled = false; 
var _resize_precision = 100; 

// This register for window resize events. No need to change anything. 
$(window).resize(function() { 

    if (!_resize_is_busy) { 

     // call the scheduler who will do the work and set a timer to 
     // check of other resizes occured within a certain period of time 

     _resize_scheduler(); 
    } 
    else { 

     // the resizer is busy, i.e. a resize have been handled a little 
     // time ago and then the scheduler is waiting some time before 
     // handling any other resize. This flag tells the scheduler that 
     // a resize event have been receive while he was sleeping. 

     _resize_scheduled = true; 
    } 
}); 

// This is the scheduler. No need to change anything. 
var _resize_scheduler = function() { 

    _resize_is_busy = true; 
    _resize_scheduled = false; 

    setTimeout(function() { 

     _resize_is_busy = false; 

     if (_resize_scheduled) 
      _handle_resize(); 

    }, _resize_precision); 

    _handle_resize(); 
} 

var _handle_resize = function() { 

    console.log('DOING ACTUAL RESIZE'); 

    // do the work here 
    //... 
} 

이 정보가 도움이되기를 바랍니다.