JS 프런트 엔드 기능 조절에서 setTimeout의 영리한 사용법

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

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

함수 조절의 기본 원리:

타이머를 사용하여 먼저 함수 실행을 지연시킵니다. , setTomeout() 함수를 사용하여 일정 시간 동안 함수 실행을 지연합니다. 이 기간 동안 다른 이벤트가 트리거되면 ClearTimeout() 메서드를 사용하여 타이머를 지운 다음 setTimeout()을 사용하여 새 이벤트를 설정할 수 있습니다. 타이머. 서버가 잠시 동안 실행을 지연합니다.

최근 한 팀이 프로젝트로 바쁘다. (왜 React를 사용하지 않는지에 대해 불평하는) 그런 페이지가 있는데, 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()는 매개변수 목록을 받아들인다는 것입니다. 여러 매개변수를 포함하는 배열(또는 배열과 유사한 객체)입니다.

Parameters

thisArg

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

argsArray

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

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

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

이 메서드는 지정된 this 값을 사용하고 여러 개의 지정된 매개변수 값을 갖는 함수 또는 메서드. fun 함수가 실행 중일 때

Parameters

thisArg

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

arg1, arg2, ...

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

함수를 호출할 때 다른 this 개체를 할당할 수 있습니다. 이는 호출 메소드의 첫 번째 매개변수인 현재 객체를 나타냅니다. call 메소드를 통해 Object 객체의 메소드를 빌린 Array 객체인 Object.prototype.toString.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의 영리한 사용과 프런트엔드 기능 조절에 관해 편집자가 여기서 소개하겠습니다. 도움이 되길 바랍니다!

JS에서 setTimeout을 더 영리하게 사용하는 방법과 프런트엔드 기능 조절에 관한 관련 기사를 보려면 PHP 중국어 웹사이트를 주목하세요!