웹 프론트엔드 JS 튜토리얼 여러 times_javascript 기술을 트리거하는 window.onresize 솔루션

여러 times_javascript 기술을 트리거하는 window.onresize 솔루션

May 16, 2016 pm 05:16 PM
window

이전에 확장 프로그램을 만들 때 창 크기를 변경할 때 페이지가 정상적으로 표시되는지 확인해야 해서 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가 전송됩니다.
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

뜨거운 기사 태그

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

JavaScript로 문자열 문자를 교체하십시오 JavaScript로 문자열 문자를 교체하십시오 Mar 11, 2025 am 12:07 AM

JavaScript로 문자열 문자를 교체하십시오

jQuery는 요소 패딩/마진을 얻습니다 jQuery는 요소 패딩/마진을 얻습니다 Mar 01, 2025 am 08:53 AM

jQuery는 요소 패딩/마진을 얻습니다

jQuery 날짜가 유효한지 확인하십시오 jQuery 날짜가 유효한지 확인하십시오 Mar 01, 2025 am 08:51 AM

jQuery 날짜가 유효한지 확인하십시오

10 JQuery Accordions 탭 10 JQuery Accordions 탭 Mar 01, 2025 am 01:34 AM

10 JQuery Accordions 탭

10 JQuery 플러그인을 확인할 가치가 있습니다 10 JQuery 플러그인을 확인할 가치가 있습니다 Mar 01, 2025 am 01:29 AM

10 JQuery 플러그인을 확인할 가치가 있습니다

노드 및 HTTP 콘솔로 HTTP 디버깅 노드 및 HTTP 콘솔로 HTTP 디버깅 Mar 01, 2025 am 01:37 AM

노드 및 HTTP 콘솔로 HTTP 디버깅

사용자 정의 Google 검색 API 설정 자습서 사용자 정의 Google 검색 API 설정 자습서 Mar 04, 2025 am 01:06 AM

사용자 정의 Google 검색 API 설정 자습서

jQuery div에 스크롤 바를 추가합니다 jQuery div에 스크롤 바를 추가합니다 Mar 01, 2025 am 01:30 AM

jQuery div에 스크롤 바를 추가합니다

See all articles