브라우저의 일부 계산 및 처리는 다른 계산보다 훨씬 비쌉니다. 예를 들어, DOM 작업에는 비 DOM 상호 작용보다 더 많은 메모리 및 CPU 시간이 필요합니다. 너무 많은 DOM 관련 작업을 연속적으로 수행하려고하면 브라우저가 매달리고 때로는 충돌이 발생할 수 있습니다. IE에서 Onresize 이벤트 핸들러를 사용할 때 특히 발생할 수 있습니다. 브라우저가 크기가 커지면 이벤트가 지속적으로 트리거됩니다. OnResize 이벤트 핸들러 내에서 DOM 작업을 수행하려고하면 높은 주파수 변경으로 브라우저가 충돌 할 수 있습니다.
기능 조절기의 기본 아이디어는 중단없이 특정 코드를 반복적으로 실행할 수 없다는 것입니다. 기능이 처음 호출되면 타이머가 생성되고 지정된 시간 간격 후에 코드가 실행됩니다. 함수를 두 번째 타이머라고하면 이전 타이머를 지우고 다른 타이머를 설정합니다. 이전 타이머가 실행되면이 작업에는 의미가 없습니다. 그러나 이전 타이머가 실행되지 않으면 실제로 새로운 타이머로 대체됩니다. 목적은 함수 실행 요청이 일정 시간 동안 중지 된 후에 만 실행하는 것입니다.
함수 스로틀 (메소드, 컨텍스트) {clareTimeout (method.tid); method.tid = settimeout (function () {method.call (context);}, 100); }Application example:
높이가 항상 너비와 동일하게 유지 해야하는 <div/> 요소가 있다고 가정하면 다음과 같이 인코딩 할 수 있습니다.
함수 resizediv () {var div = document.getElementById ( "mydiv"); div.style.height = div.offsetwidth + "px"; } window.onResize = function () {스로틀 (resizev); }여기서, 크기 조정 기능은 resizeiv라는 별도의 함수에 넣고, onresize 이벤트 핸들러는 rottle ()을 호출하고 resizediv ()를 직접 호출하는 대신 resizediv 함수로 통과합니다. 대부분의 경우 브라우저에 저장된 계산은 매우 클 수 있지만 대부분의 경우 사용자는 변경을 느낄 수 없습니다.
다음은 다른 네티즌의 추가 기능입니다
오늘, 우리는 주로 일상 업무에서 필요한 기능에 대해 글을 씁니다. 일부 친구는 기능 조절을 알지 못할 수 있습니다. 실제로, 작업에서 많은 시나리오는 우리가 throttp : //www.sub.com을 요구해야합니다. 가장 일반적인 것은 화면 크기 조정 및 터치 모브 또는 스크롤 이벤트입니다. 내가 전에 쓴 기사를 읽었는지 모르겠습니다! jQuery는 페이지 스크롤 바 및 터치 모브의 슬라이딩 방향을 결정합니다. 이 예제를 사용하면 페이지가 페이지를 다시 칠할 필요가 없기 때문에 페이지가 터치 모브 또는 스크롤을 계속 트리거하는 것을 알게 될 것입니다. 그러나 Window.onresize를 사용하면 크기 조정 이벤트가 지속적으로 트리거됩니다! 이것은 페이지 페인팅 문제와 관련이 있습니다. 따라서 창 크기를 조정하면 기능 스로틀링을 사용하는 것이 좋습니다!
JavaScript 기능의 스로틀 소개
당신이 나에게 큰 텍스트에 압도된다고 느끼면 중요하지 않습니다. 여기서 스로틀링 기능을 설명하기 위해 간단한 예를 드리겠습니다! 예를 들어 우리가 사용할 때
$ (window) .resize (function () {console.log ( "Haorooms Window resize");})당신은 찾을 것입니다 :
여기에는 여러 번 출력됩니다. 우리는 단순히 창문을 좁히고 계속 트리거 될 것입니다!
이런 식으로 DIV가 자주 사용되면 페이지가 지속적으로 다시 그려집니다. 상대적으로 낮은 버전으로 나타나면 브라우저가 충돌 할 수 있습니다! 이를 피하기 위해 기능 스로틀 링 방법을 사용할 수 있습니다. 기본 아이디어는 다음과 같습니다. 기능이 처음으로 호출되면 타이머를 생성하고 지정된 시간 간격 후에 코드를 실행하고 두 번째 시간이 호출되면 이전 타이머를 명확하게 이해하고 재설정합니다. 이전 타이머가 실행 된 경우이 작업은 의도적이지 않습니다. 타이머가 실행되지 않으면 새 타이머로 교체됩니다. 목적은 기능이 일정 시간 동안 중지 된 후에 실행하는 것입니다.
객체 방법은 다음과 같이 쓸 수 있습니다.
var haoroomstest = {timeoutid : null, performprocessing : function () {console.log ( "resize"); }, process : function () {cleartimeout (this.timeoutid); var that = this; this.timeoutid = settimeout (function () {that.performprocessing ();}, 500)}}그 후 우리는 다음을 사용합니다.
$ (window) .resize (function () {haoomstest.process ();})
이렇게하면 요청이 줄어들고 DOM을 다시 그리기를 줄이며 스로틀링 목적을 달성 할 수 있습니다!
다른 기능 스로틀링 방법
우리가 객체를 사용하는 방식 외에도 다른 방법 및 기능 조절 방법도 온라인 및 정보에 소개됩니다. 아래에 몇 가지를 간단히 소개하겠습니다!
기능 방법
함수 스로틀 (메소드, 컨텍스트) {clareTimeout (method.tid); method.tid = settimeout (function () {method.call (context);}, 100); }우리는 사용합니다
function resizediv () {console.log ( "harooms")} $ (window) .resize (function () {스로틀 (resizev)})위의 개체와 동일한 효과!
기능 방법 2
온라인으로 돈을 금지하는 더 인기있는 방법이 있으므로 여기에 글을 쓸 것입니다!
함수 스로틀 (메소드, 지연) {var timer = null; return function () {var context = this, args = argument; 클리어 타임 아웃 (타이머); timer = settimeout (function () {method.apply (context, args);}, 지연); }}그런 다음 이것을 쓸 수 있습니다.
함수 resizediv () {console.log ( "haorooms")} window.onResize = 스로틀 (Resizev, 500);새로운 수요
퍼지 Search Intelligent Association 프롬프트를 수행하면 입력에 대한 KeyUP 이벤트를 바인딩합니다. 그러나 나는 그것을 자주 트리거하고 싶지 않으므로 위의 방법을 사용하는 데 문제가 있습니다. 따라서 위의 함수는 다음과 같이 약간 변경됩니다.
함수 스로틀 (메소드, 지연, 지속 시간) {var timer = null, 시작 = 새 날짜 (); return function () {var context = this, args = arguments, current = new date () ;; 클리어 타임 아웃 (타이머); if (current-begin> = duration) {method.apply (context, args); 시작 = 현재; } else {timer = settimeout (function () {method.Apply (context, args);}, 지연); }}}이런 식으로 트리거링은 이전처럼 자주 발생하지 않습니다!