JavaScript_javascript 기술에서 이벤트 함수의 고주파 트리거링 및 고주파 호출을 방지하는 방법

웹페이지에서 JavaScript의 가장 기본적인 기능은 사용자 작업을 모니터링하거나 응답하는 것인데 이는 매우 유용합니다. 사용자의 작업 중 일부는 매우 빈번하고 일부는 매우 드뭅니다. 일부 리스너 기능은 번개처럼 빠르게 실행되는 반면 다른 기능은 가혹하여 브라우저를 죽음에 이르게 할 수 있습니다. 브라우저 창의 크기 조정 이벤트를 예로 들어 보겠습니다. 이 이벤트는 브라우저 창의 크기가 변경될 때마다 한 번 트리거됩니다. 리스너가 크면 브라우저가 곧 압도됩니다.

분명히 브라우저가 종료되는 것을 허용할 수는 없지만 삭제 리스너를 삭제할 수는 없습니다. 그러나 함수 호출 빈도를 제한하고 이벤트 함수 실행의 영향을 약화시킬 수 있습니다. 창의 크기가 변경될 때마다 리스너 함수를 한 번씩 트리거하는 대신, 이제 리스너 함수를 트리거하는 최소 간격을 특정 밀리초보다 크게 설정할 수 있으므로 합당한 호출 채널을 유지하고 사용자가 경험치는 파괴되지 않습니다. Underscore.js라는 좋은 js 도구 라이브러리가 있는데, 이 라이브러리에는 이벤트 함수 트리거의 빈도를 줄이는 리스너를 쉽게 만들 수 있는 간단한 방법이 있습니다.

자바스크립트 코드

주파수 감소 리스너의 코드는 매우 간단합니다.

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

//리스너 생성
var updateLayout = _.debounce(function(e) {

// 여기서 모든 레이아웃 업데이트를 수행합니다

}, 500) // 최소한 500밀리초마다 실행

// 이벤트 리스너 추가
window.addEventListener("resize", updateLayout, false);
...이 Underscore.js 코드의 맨 아래 레이어는 실제로 간격을 사용하여 이벤트 함수 호출 빈도를 확인합니다.

// 계속 호출되는 한 함수를 반환하지 않습니다.
// 호출이 중지된 후에 함수가 호출됩니다.
// N밀리초. `immediate`가 전달되면
에서 함수를 트리거합니다. // 후행 대신 선행 가장자리.
_.debounce = 기능(func, wait, 즉시) {
var 시간 초과;
반환 함수() {
var context = this, args = 인수;
var later = function() {
시간 초과 = null;
If (!immediate) func.apply(context, args);
};
var callNow = 즉시 && !timeout;
ClearTimeout(timeout);
timeout = setTimeout(나중에, 대기);
if (callNow) func.apply(context, args);
};
};

코드가 특별히 복잡하지는 않지만, 직접 작성하지 않아도 된다는 점은 축복입니다. 이 디바운스 기능은 다른 Underscore.js 기능에 의존하지 않으므로 이 메소드를 jQuery 또는 MooTools와 같이 자주 사용하는 js 도구 라이브러리에 매우 쉽게 추가할 수 있습니다.

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

// 무툴
Function.implement({
디바운스: 기능(잠깐, 즉시) {
var 시간 초과,
       func = this;
반환 함수() {
var context = this, args = 인수;
var later = function() {
시간 초과 = null;
If (!immediate) func.apply(context, args);
};
var callNow = 즉시 && !timeout;
ClearTimeout(시간 초과);
Timeout = setTimeout(나중에, 대기);
If (callNow) func.apply(context, args);
};
}
});

// 활용해보세요!
window.addEvent("resize", myFn.debounce(500));

위에서 언급한 것처럼 창의 크기 조정 이벤트는 빈도 감소 작업을 사용하는 가장 일반적인 장소입니다. 또 다른 일반적인 장소는 사용자의 키 입력에 따라 자동 완성 프롬프트를 제공하는 것입니다. 나는 귀하의 웹사이트를 보다 효율적으로 쉽게 만들 수 있는 이와 같은 코드 조각을 수집하는 것을 좋아합니다. 또한 매우 유용한 기능을 많이 제공하는 Underscore.js를 연구하는 것이 좋습니다.