웹페이지에서 JavaScript의 가장 기본적인 기능은 사용자 작업을 모니터링하거나 응답하는 것인데 이는 매우 유용합니다. 사용자의 작업 중 일부는 매우 빈번하고 일부는 매우 드뭅니다. 일부 리스너 기능은 번개처럼 빠르게 실행되는 반면 다른 기능은 가혹하여 브라우저를 죽음에 이르게 할 수 있습니다. 브라우저 창의 크기 조정 이벤트를 예로 들어 보겠습니다. 이 이벤트는 브라우저 창의 크기가 변경될 때마다 한 번 트리거됩니다. 리스너가 크면 브라우저가 곧 압도됩니다.
분명히 브라우저가 종료되는 것을 허용할 수는 없지만 삭제 리스너를 삭제할 수는 없습니다. 그러나 함수 호출 빈도를 제한하고 이벤트 함수 실행의 영향을 약화시킬 수 있습니다. 창의 크기가 변경될 때마다 리스너 함수를 한 번씩 트리거하는 대신, 이제 리스너 함수를 트리거하는 최소 간격을 특정 밀리초보다 크게 설정할 수 있으므로 합당한 호출 채널을 유지하고 사용자가 경험치는 파괴되지 않습니다. Underscore.js라는 좋은 js 도구 라이브러리가 있는데, 이 라이브러리에는 이벤트 함수 트리거의 빈도를 줄이는 리스너를 쉽게 만들 수 있는 간단한 방법이 있습니다.
자바스크립트 코드
주파수 감소 리스너의 코드는 매우 간단합니다.
// 여기서 모든 레이아웃 업데이트를 수행합니다
}, 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);
};
};
// 활용해보세요!
window.addEvent("resize", myFn.debounce(500));