이전에 확장 프로그램을 만들 때 창 크기를 변경할 때 페이지가 정상적으로 표시되는지 확인해야 해서 window.onresize를 사용했는데, 나중에 onresize를 할 때마다 페이지 상태가 잘못된 것을 발견했습니다. onresize 이벤트가 여러 번 발생했다는 사실을 알고 온라인에서 솔루션을 수집하여 정리했습니다.
//
onresize 이벤트가 발생하는 횟수는 브라우저마다 다릅니다. Safari, Opera, Firefox는 모두 한 번만 사용됩니다. (각각 테스트에는 하나의 버전만 사용되었으며 모두 최신 버전입니다.) ;
//ie6 in quirk에서는 2번, Standard에서는 3번, ie7과 8에서는 quirk와 Standard에서 2번 트리거됩니다.
window.onresize = function(){
console .log( 'hello world');
}
onresize가 몇 번이나 실행되는지는 중요하지 않습니다. 중요한 것은 해결책입니다. 여러 번 실행되면 할당된 함수를 호출하세요. onresize 한 번
//
//디바운스라는 단어를 어떻게 번역해야 할지 모르겠어요. 형님 저는 전공이 아니어서 너무 웃을까봐 쉽게 번역할 수가 없어요. . :)
//
var debounce = function (func, Threshold, execAsap) {
var timeout;
return function debounced () {
var obj = this, args = 인수; 🎜>함수 지연() {
if (!execAsap)
func.apply(obj, args)
timeout = null
}
if (timeout)
clearTimeout (timeout);
else if (execAsap)
func.apply(obj, args);
timeout = setTimeout(delayed, Threshold || 100)
}
// 제가 작성한 코드가 아님을 설명해주세요.
// 코드 설명:
debounce는 3개의 매개변수를 허용하며, 마지막 두 개는 선택 사항입니다. 첫 번째는 디바운스하는 함수이고, 두 번째는 디바운스의 시간 간격을 나타내며, 세 번째는 기간의 시작 부분입니다. 또는 함수 실행을 종료합니다.
debounce는 두 함수 실행 사이의 간격이 최소한 임계값이며 호출이 임계값 간격보다 작으면 타이밍(두 호출 사이의 시간 간격)을 다시 시작합니다. ;
PutclearTimeout(timeout) 타이머로 대체 = null; 반환된 함수의 두 실행 사이의 간격은 최소 임계값이며, 임계값 간격보다 작은 호출은 타이밍(두 호출 사이의 시간 간격)을 다시 시작합니다.
// onresize에 대한 여러 호출 해결
window.onresize = debounce( function(){
alert( ' hello world');
}, 100, true)
// Debounce는 자동 완성에도 사용됩니다. 서버에 대한 요청 수를 줄입니다. 연속 키 입력 사이의 간격이 특정 값보다 크면 Ajax가 전송됩니다.