2012-10-31 4 views
0

나는 주로 모바일 및 태블릿 용 웹 사이트에서 작업하고 있습니다. 그냥 너무 많은 간격을 사용하여 단점이 있는지 물어보고 싶습니까? 현재로서는 1 시간 간격으로 5000ms를 사용하여 현재 시간을 확인하고 1 간격으로 100ms 간격으로 장치의 너비가 변경되는지 확인합니다. (응답 목적으로)자바 스크립트 간격 불이익

우리 선배는 우리가 간격을 가능한 한 적게 사용하면 구멍이나 지연 등이 발생할 수 있습니다. 사실입니까?

+3

왜 미디어 쿼리/CSS를 사용하여 너비 변경을 확인하지 않습니까? 훨씬 더 빠르고 쉽게 될 것입니다. CSS를 사용할 수없는 경우 윈도우의 크기 조정 이벤트를 수신합니다. – m90

답변

1

업데이트 :
Check this page, and all linked articles of interest : 특정

에서 웹 노동자, 비동기 이벤트 및 시간 제한

간격을 사용할 때 가장 큰 단점은 내가 아는 모든 현재 JS 구현이 단일 스레드라는 사실입니다. 따라서 간격을 100ms마다 호출하고 다른 하나를 500ms마다 호출하도록 설정하면 간격이 동시에 실행되지 않습니다. 두 번째 간격으로 실행하는 코드에서 반환 된 첫 번째 간격에 크게 의존하는 경우 조만간 문제가 발생할 것입니다.

또 다른 점은 간격이 정확하지 않다는 것입니다. 100ms는 ~ 100ms로보아야하며, 설정 간격과 실제 간격의 차이는 매우 클 수 있습니다 (100ms 간격은 150ms만큼 쉽게 될 수 있음).

최종 결과는 수석 인이 가능한 한 피하십시오. 그러나 때로는 간격을 사용하는 것 외에는 대안이 없습니다.이 경우, 모든 간격을 나열 가장 작은 공통 분모를 찾아 당신이를 반환하려면이 옵션을 확장 할 수 있습니다

var allIntervals = (function() 
{ 
    var interval100MS = function(){}; 
    var interval200MS = function(){};//etc... 
    var timesCalled = 0; 
    var timer = setInterval(function() 
    { 
     if (++timesCalled%2) 
     { 
      return interval100MS(); 
     } 
     interval100MS(); 
     return interval200MS(); 
    },100); 
    return timer;//<-- expose so you can clear the interval, of course 
}()); 

"자신의 시간이왔다"때 다양한 기능을 호출하는 클로저를 사용하여 하나 개의 큰 간격을 설정 당신이 여분의 간격을 설정할 수 있습니다 개체가 주 간격 시간을 변경, 설정되지 않은 특정 간격 등 ...

편집
난 당신이 간격을 사용하고 있다는 사실을 간과. 그것은 단지 불필요한 것입니다 : window.onresize 또는 window.addEventListener('resize',handlerFunction,false); 그냥 그렇게 할 것입니다. JS는 이벤트의 사이클/루프를 가지고있어 모든 종류의 자체 제작 코드보다 훨씬 효율적으로 작업을 처리합니다.
가장 좋은 개발자는 본질적으로 게으른 사람들이라고 종종 말합니다. 그들은 많은 어려움을 겪을 것입니다. 단지 그들이 필요로하는 것이 이전에 수행되지 않았 음을 확신하기 위해서입니다. 그들이 필요한 것을하는 것을 발견하면, 똑같은 것을 쓰지 않고 그것을 사용할 것입니다.

어쨌든 내 답변 맨 위에 링크를 추가 했으므로 두 번째로 here을 추가 할 예정입니다. 이 부분을 확인하십시오. 특히 웹 작업자에 대한 참조를 확인하십시오. 시간을 확인하는 경우 (방법/이유/현재 수행중인 작업이 확실하지 않은 경우) 유용 할 수 있습니다.

0

X 초마다 실행할 작업을 설정합니다. 이러한 작업에는 CPU 시간이 필요하고 웹 사이트의 성능이 저하됩니다. 그것은 물론 당신이 그 일들에서 무엇을하는지에 달려 있습니다. 그러나이를 수행하면 5000ms가 아닌 1000ms마다 성능이 저하됩니다. 따라서 항상 가능한 한 높은 간격으로 값을 선택하는 것이 좋습니다.

당신이 jQuery를 사용하는 경우, 당신은 당신의 자신의 간격을 구현보다 적은 성능을 사용하는 장치 폭 변경, 확인하기 위해 다음 코드를 사용할 수 있습니다 : 여기

$(window).resize(function() { /* do something */ }); 
+0

실제로 jQuery가 필요하지 않습니다. 일반 DOM 메소드를 사용하여 이벤트를 수신하거나 사이트에서 사용중인 다른 라이브러리를 사용하여 동일한 작업을 수행 할 수 있습니다. – Gijs

1

응답자 모두를 올바른 생각을 가지고이 - 브라우저 캐시 된 값을 지속적으로 확인하고 비교하는 것을 피하기 위해 크기를 조정할 때 알려주므로 매우 나쁜 성능이됩니다. 그러나 불필요한 호출에 대한 수석의 주장은 여전히 ​​맞을 것입니다. 왜냐하면 많은 브라우저가 크기 조정 작업 (특히 IE) 중에 계속 크기가 조정되기 때문에 엄청난 오버 헤드가 발생할 수 있기 때문입니다.

이러한 성능 문제를 완화하는 두 가지 아이디어의 조합은 '조절'이라는 기술을 사용하여 이벤트를 수신하지만 모든 응답을 너무 자주 발생시키는 것입니다. http://benalman.com/projects/jquery-throttle-debounce-plugin/

내 마음에 건강한 한도는 초 당 최대 6 ~ 7 호출 할 수 없습니다 즉 끝 부분 만 기능마다 150 밀리 초를 실행할 수 있도록 것 (다음

이 여기에 대한 훌륭한 플러그인이있다) @Tsunamis '대답에서에 :

$(window).resize($.throttle(150, function(){ /* do something */ }));