JS 프런트엔드 함수 throttling_javascript 기술에서 setTimeout의 영리한 사용법

기능 조절이란 무엇인가요?

함수 조절은 단순히 함수가 짧은 시간 내에 계속 호출되는 것을 원하지 않는다는 의미입니다. 예를 들어, 우리가 하는 가장 일반적인 일은 창을 확대할 때 다른 작업 기능을 수행하는 경우가 많습니다. 예를 들어 Ajax 요청을 보내는 것과 같이 창이 확대되면 여러 요청을 연속적으로 보낼 수 있는데 이는 우리가 원하는 것이 아니며 마우스를 안팎으로 움직이는 일반적인 탭 전환 효과일 때도 있습니다. 때때로 깜박이는 효과가 있을 수 있습니다. 이때 기능 조절을 사용하여 작동할 수 있습니다. 우리 모두 알고 있듯이 DOM 작업은 매우 소모적이거나 성능에 영향을 미칩니다. 창을 확대할 때 많은 수의 DOM 작업이 요소에 바인딩되면 예를 들어 IE에서는 너무 많은 계산이 연속됩니다. DOM 작업이 발생합니다. 이 작업은 브라우저 성능에 영향을 미치며 심각한 경우 브라우저 충돌을 일으킬 수도 있습니다. 이때 함수 ​​조절을 사용하여 코드를 최적화할 수 있습니다~

기능 조절의 기본 원칙:

타이머를 사용하여 먼저 함수 실행을 지연시킵니다. 예를 들어, 일정 시간 동안 함수 실행을 지연하려면 setTomeout() 함수를 사용하세요. 지우기 메소드clearTimeout() 타이머를 지우려면 setTimeout() 새 타이머를 설정하여 잠시 동안 실행을 지연시킵니다.

최근 한 팀이 프로젝트로 바쁘게 지내고 있는데, 전통적인 모드로 개발한 페이지가 있습니다(왜 DOM 작업을 사용하지 않는지 불평). 상대적으로 열악하고, 특히 창을 확대하고 축소할 때 끔찍한 일이 발생하거나, 지연이 발생하거나, 브라우저가 충돌하는 경우도 있습니다. 왜?

이 페이지에는 DOM 작업이 많기 때문에 창을 확대/축소할 때 매 프레임마다 함수 실행이 트리거되고 DOM 작업이 계속 반복되므로 브라우저에 비용이 많이 듭니다. 창이 확대되면 브라우저가 DOM을 다시 계산하므로 DOM 계산을 지연하고 다시 계산하기 전에 창이 확대/축소를 중지하도록 하면 브라우저의 오버헤드가 절약되고 이미 최적화 효과를 얻을 수 있습니까?

지식 준비

1. 이 글의 주인공은 역시 setTimeout(code,millisec) 입니다.

setTimeout() 메서드는 지정된 밀리초 후에 함수나 계산된 표현식을 호출하는 데 사용됩니다.

코드가 필요합니다. 호출할 함수 다음에 실행될 JavaScript 코드 문자열입니다.

밀리초가 필요합니다. 코드를 실행하기 전에 기다려야 하는 시간(밀리초)입니다.

팁: setTimeout()은 코드를 한 번만 실행합니다. 여러 번 호출하려면 setInterval()을 사용하거나 코드 자체에서 setTimeout()을 다시 호출하도록 하세요.

타이머, 캐러셀, 애니메이션 효과, 자동 스크롤 등에 널리 사용됩니다.

2.clearTimeout(id_of_setTimeout)

매개변수 id_of_settimeout은 setTimeout()이 반환한 ID 값입니다. 이 값은 취소할 지연된 실행 코드 블록을 식별합니다.

3. fun.apply(thisArg[, argsArray])

apply() 메소드는 이 값과 매개변수를 지정하여 함수를 호출합니다(매개변수는 배열 또는 배열 유사 객체의 형태로 존재합니다)

이 함수의 구문은 call() 메서드와 거의 동일합니다. 유일한 차이점은 call() 메서드는 매개변수 목록을 허용하는 반면, apply()는 여러 항목을 포함하는 배열(또는 배열과 유사한 객체)을 허용한다는 것입니다. 매개변수.)

매개변수

thisArg

fun 함수가 실행될 때 지정되는 이 값입니다. 함수가 실행될 때 지정된 this 값이 반드시 실제 this 값이 아닐 수도 있다는 점에 유의해야 합니다. 함수가 엄격하지 않은 모드인 경우 전역 개체(브라우저의 창 개체)를 자동으로 가리킵니다. null 또는 정의되지 않음)으로 지정되며 값이 기본 값(숫자, 문자열, 부울 값)인 this는 기본 값의 자동 래핑 개체를 가리킵니다.

argsArray

배열 또는 배열 유사 객체로, 배열 요소는 fun 함수에 별도의 매개변수로 전달됩니다. 이 매개변수의 값이 null이거나 정의되지 않은 경우 매개변수를 전달할 필요가 없음을 의미합니다. ECMAScript 5부터 배열과 유사한 객체를 사용할 수 있습니다.

기존 함수를 호출할 때 해당 함수에 대해 this 개체를 지정할 수 있습니다. this는 이 함수를 호출하는 객체인 현재 객체를 나타냅니다. 적용을 사용하면 새 개체에 메서드를 반복해서 작성할 필요 없이 메서드를 한 번 작성한 다음 다른 개체에 상속할 수 있습니다.

4. fun.call(thisArg[, arg1[, arg2[, ...]]])

이 메소드는 지정된 this 값과 지정된 여러 매개변수 값을 사용하여 함수 또는 메소드를 호출합니다.

매개변수

thisArg

fun 함수가 실행될 때 지정되는 이 값입니다. 함수가 실행될 때 지정된 this 값이 반드시 실제 this 값일 필요는 없습니다. 함수가 엄격하지 않은 모드에 있는 경우 null 및 undef로 지정된 this 값은 자동으로 전역 개체를 가리킵니다. 브라우저의 경우 이는 창 개체입니다), 값이 기본 값(숫자, 문자열, 부울 값)인 이 개체는 기본 값의 자동 래핑 개체를 가리킵니다.

arg1, arg2, ...

지정된 매개변수 목록입니다.

함수를 호출할 때 다른 this 개체를 할당할 수 있습니다. 이는 호출 메소드의 첫 번째 매개변수인 현재 객체를 나타냅니다. call 메소드를 통해 Object 객체의 메소드를 빌린 Array 객체인 Object.prototype.toString.call([])과 같이 다른 객체에서 한 객체의 메소드를 빌릴 수 있습니다.

기능:

호출 메소드를 사용하여 상위 생성자를 호출합니다

call 메서드를 사용하여 익명 함수 호출

call 메서드를 사용하여 익명 함수를 호출하고 컨텍스트의 'this'를 지정합니다

여담:

apply는 call()과 매우 유사하지만 차이점은 매개변수 제공 방식에 있습니다. Apply는 매개변수 목록 세트가 아닌 매개변수 배열을 사용합니다. Apply는 fun.apply(this, ['eat', 'bananas'])와 같은 배열 리터럴 또는 fun.apply(this, new Array('eat', 'bananas' ))와 같은 배열 객체를 사용할 수 있습니다. 인수 개체를 argsArray 인수로 사용할 수도 있습니다. 인수는 함수의 지역 변수입니다. 호출된 객체의 지정되지 않은 매개변수로 사용될 수 있습니다. 이렇게 하면 Apply 함수를 사용할 때 호출된 객체의 모든 매개변수를 알 필요가 없습니다. 인수를 사용하여 모든 인수를 호출된 개체에 전달할 수 있습니다. 그러면 호출된 개체가 이러한 매개변수를 처리합니다.

ECMAScript 버전 5부터는 길이 속성과 [0...length) 범위의 정수 속성이 있는 한 모든 종류의 배열 유사 객체를 사용할 수 있습니다. 예를 들어 이제 NodeList 또는 {'length': 2, '0': 'eat', '1': 'bananas'}와 유사한 자체 정의 객체를 사용할 수 있습니다.

call 메서드와 Apply 메서드의 차이점은 두 번째 매개변수부터 호출 메서드 매개변수가 빌린 메서드에 매개변수로 전달되고, Apply는 이 매개변수를 직접 배열에 넣은 후 전달하고 마지막으로 차용된 메소드의 매개변수 목록은 동일합니다.

응용 시나리오: 매개변수가 명확할 때 호출을 사용할 수 있고 매개변수가 명확하지 않을 때 적용을 사용하여 인수를 결합할 수 있습니다

이제 예를 들어보세요

우리 모두 알고 있듯이 onscolll, onresize 등은 성능을 많이 소모하며 창을 확대하면 숫자가 인쇄됩니다.

var count = ;
window.onresize = function () {
count++;
console.log(count);
}

크롬 브라우저에서 브라우저 창 크기를 축소하고, 다음과 같이 인쇄하세요

이것은 분명히 우리가 원하는 것이 아닙니다. Ajax 요청으로 전환하면 창 크기가 한 번 조정되고 여러 Ajax 요청이 연속적으로 트리거됩니다. 물론 settimeout을 사용하세요. ) 타이머,

첫번째 포장방법

var count = ;
function oCount() {
count++;
console.log(count);
}
window.onresize = function () {
delayFun(oCount)
};
function delayFun(method, thisArg) {
clearTimeout(method.props);
method.props = setTimeout(function () {
method.call(thisArg)
}, )
}

두 번째 포장방법

클로저를 구성하고 클로저를 사용하여 타이머를 저장하는 비공개 범위를 형성합니다. 타이머는 매개변수를 전달하여 도입됩니다.

var count = ;
function oCount() {
count++;
console.log(count);
}
var funs= delayFun(oCount,);
window.onresize = function () {
funs()
};
function delayFun(func, wait) {
var timer = null;
return function () {
var context = this,
args = arguments;
clearTimeout(timer);
timer = setTimeout(function () {
func.apply(context, args);
}, wait)
};
}

두 번째 방법을 최적화하면 성능이 더 좋아질 것입니다

중단 없이 호출되면 실행되지 않는 함수를 반환합니다. 함수는 호출이 중지된 후 N 밀리초 후에 다시 호출될 때까지 실행되지 않습니다. 'immediate' 매개변수가 전달되면 함수는 지연 없이 즉시 실행 큐에 예약됩니다.

function delayFun (func, wait, immediate) {
var timeout;
return function() {
var context = this, args = arguments;
var later = function() {
timeout = null;
if (!immediate) func.apply(context, args);
};
var callNow = immediate && !timeout;
clearTimeout(timeout);
timeout = setTimeout(later, wait);
if (callNow) func.apply(context, args);
};
};
// 用法
var myEfficientFn = delayFun (function() {
// 所有繁重的操作
}, );
window.addEventListener('resize', myEfficientFn); 

이 함수는 지정된 시간 내에 콜백 함수가 두 번 이상 실행되는 것을 허용하지 않습니다. 이 함수는 자주 발생하는 이벤트에 콜백 함수를 할당할 때 특히 중요합니다.

setTimeout은 너무 강력해서 프로젝트에서 광범위하게 사용할 수 있나요?

저는 개인적으로 권장하지 않습니다. 비즈니스 로직에서 setTimeout을 사용하는 것은 기본적으로 금지되어 있습니다. 왜냐하면 제가 본 많은 사용 방법이 해결하기 쉬운 문제이고 setTimeout이 해킹으로 사용되기 때문입니다.

예를 들어 인스턴스가 초기화되지 않은 경우 이 인스턴스를 사용합니다. 잘못된 해결책은 인스턴스를 사용할 때 인스턴스가 먼저 초기화되도록 setTimeout을 추가하는 것입니다.

왜 틀렸나요? 이게 실제로 핵을 활용하는 방법입니다

첫 번째는 함정을 설치하여 모듈의 수명주기를 방해하는 것입니다

두 번째는 문제가 발생할 때 setTimeout을 디버깅하기가 실제로 어렵다는 것입니다.

라이프사이클을 살펴보고("소프트웨어의 라이프사이클에 대하여" 참조) 사용하기 전에 인스턴스화를 언급하는 것이 올바른 사용 방법이라고 생각합니다.

JS에서의 setTimeout의 영리한 사용과 프런트엔드 기능 조절에 관해 편집자가 여기서 소개하겠습니다. 도움이 되길 바랍니다!