JavaScript 함수 조절에 대한 간략한 토론_기본 지식-JS 튜토리얼-php.cn

JavaScript 함수 조절에 대한 간략한 토론_기본 지식

WBOY

풀어 주다： 2016-05-16 16:28:09

원래의

1487명이 탐색했습니다.

브라우저에서의 일부 계산 및 처리 비용은 다른 것보다 훨씬 비쌉니다. 예를 들어 DOM 작업에는 DOM이 아닌 상호 작용보다 더 많은 메모리와 CPU 시간이 필요합니다. 너무 많은 DOM 관련 작업을 연속해서 수행하려고 하면 브라우저가 중단되고 때로는 충돌이 발생할 수도 있습니다. 이는 특히 IE에서 onresize 이벤트 핸들러를 사용할 때 발생할 가능성이 높습니다. 브라우저 크기가 조정되면 이벤트가 계속해서 트리거됩니다. onresize 이벤트 핸들러 내에서 DOM 작업을 수행하려고 하면 변경 빈도가 높아져 브라우저가 중단될 수 있습니다.
함수 조절의 기본 아이디어는 특정 코드가 중단 없이 계속해서 반복적으로 실행될 수 없다는 것입니다. 함수가 처음 호출되면 지정된 간격 후에 코드를 실행하도록 타이머가 생성됩니다. 이 함수가 두 번째 호출되면 이전 타이머를 지우고 다른 타이머를 설정합니다. 이전 타이머가 이미 실행된 경우 이 작업은 의미가 없습니다. 단, 이전 타이머가 아직 실행되지 않은 경우 실제로는 새로운 타이머로 교체됩니다. 목적은 실행 요청이 일정 시간 동안 중지된 후에만 기능을 실행하는 것입니다.

코드 복사 코드는 다음과 같습니다.

기능 스로틀(메서드, 컨텍스트){

Cleartimeout(Method.tid) 

                    method.tId = setTimeout ( function () {

method.call(컨텍스트);

, , , , 100);
          }

적용 사례:
높이와 너비를 동일하게 유지해야 하는

요소가 있다고 가정해 보겠습니다.

코드 복사 코드는 다음과 같습니다.

함수 resizeDiv(){

              var div = document.getElementById("mydiv");

              div.style.height = div.offsetWidth "px";

            }

              window.onresize = function(){

스로틀(resizeDiv);

            }

여기서는 resizeDiv라는 별도의 함수에 resize 기능을 넣은 후, resizeDiv()를 직접 호출하는 대신 onresize 이벤트 핸들러가 throttle()을 호출하고 resizeDiv 함수를 전달합니다. 대부분의 경우 사용자는 브라우저에 저장된 계산량이 매우 클 수 있지만 변화를 느끼지 못할 것입니다.