이 기사에서는 JavaScript 함수 조절의 개념과 사용에 대해 설명합니다. 다음과 같이 참조에 대해 공유하십시오.
최근 웹 페이지를 만들 때 브라우저 창이 변경 될 때 일부 페이지 요소 크기를 변경 해야하는 요구 사항이있어서 당연히 창의 크기 조정 이벤트를 생각했기 때문에 이것을 썼습니다.
<! doctype html> <html> <head> <title> 스로틀 </title> </head> <hod> <script type = "text/javaScript"> n = 0; 함수 resizeHandler () {console.log (new Date (). gettime ()); Console.log (++ n); } window.onResize = resizeHandler; </script> </body> </html>함수가 구현되었지만 브라우저 창 크기를 변경하는 방식을 드래그 앤 드롭하면 콘솔을 보았습니다.
맞습니다. 간단한 드래그 앤 드롭으로 인해 resizehandler () 메소드가 52 번 실행되었는데, 이것이 제가 원하는 효과가 아닙니다. 실제로 resizeHandler () 메소드의 코드는 매우 복잡하며 AJAX를 사용하여 요청을 서버에 보냅니다. 한 번에 창 크기를 단순히 변경하면 52 번 전화해야합니다. 이것은 큰 문제입니다.
기능 스로틀
실제로, 나의 원래 의도는 창이 크기를 조정 한 후 페이지를 약간 조정하는 것입니다. 창의 크기 조정 이벤트는 크기 조정이 끝난 후에 트리거되지 않습니다. 특정 주파수를 모르지만 창 크기가 변경되지 않을 때까지 지속적으로 호출됩니다. 실제로, 유사한 메커니즘과 mousemove는 단기간에 반복적으로 트리거됩니다.
JavaScript Advanced Programming 에서이 문제를 구체적으로 다루는 기능이 있습니다.
함수 스로틀 (메소드, 컨텍스트) {clareTimeout (method.tid); method.tid = settimeout (function () {method.call (context);}, 500);}원칙은 매우 간단합니다. 타이머를 사용하여 500 밀리 초 씩 함수의 실행을 지연시킵니다. 500 밀리 초 이내에 함수가 다시 호출되면 마지막 호출이 삭제됩니다. 이번에는 500 밀리 초 후에 통화가 실행되며 이는 반복됩니다. 이런 식으로 내 코드는 지금 바로 변경할 수 있습니다.
<script type = "text/javaScript"> n = 0; function resizeHandler () {console.log (new Date (). gettime ()); console.log (++ n);} 함수 스로틀 (메소드, 컨텍스트) {clartimeout (method.tid); method.tid = settimeout (function () {method.call (context);}, 500);} Window.onResize = function () {스로틀 (resizeHandler, window); </script>드래그 및 드래그를 시도해보십시오. 한 번만 실행되었습니다
그것을하는 또 다른 방법
온라인으로 스로틀 링 솔루션 기능도 있습니다.
함수 스로틀 (메소드, 지연) {var timer = null; return function () {var context = this, args = argument; 클리어 타임 아웃 (타이머); timer = settimeout (function () {method.apply (context, args);}, 지연); }}같은 효과를 부르십시오
<script type = "text/javaScript"> n = 0; function resizeHandler () {console.log (new Date (). gettime ()); console.log (++ n);} 함수 스로틀 (메소드, 지연) {var timer = null; return function () {var context = this, args = argument; 클리어 타임 아웃 (타이머); timer = settimeout (function () {method.apply (context, args);}, 지연); }} window.onResize = 스로틀 (resizeHandler, 500); // 함수 핸들이 반환되기 때문에 함수를 랩핑 할 필요가 없습니다 </script>비교하다
두 방법 모두 settimeout을 사용합니다. 차이점은 두 번째 방법으로 추가 된 함수가 실행 시간을 지연 시킨다는 것입니다. 이 기능을 첫 번째 솔루션에 쉽게 사용하여 매개 변수를 추가 할 수 있습니다.
그러나 첫 번째 옵션은 TID를 저장할 기능의 변수로 설정하고 두 번째 옵션은 저장을위한 폐쇄를 만듭니다. 나는 개인적으로 그 차이가 크지 않다고 생각하며, 첫 번째는 간단하고 효율적입니다.
새로운 수요
어느 날 나는 Baidu 홈페이지에 입력을위한 자동 프롬프트와 마찬가지로 비슷한 것을 만들었습니다. 나는 텍스트의 KeyUp 이벤트를 묶었 다. 키보드가 나타날 때마다 자동으로 프롬프트하지만 자주 프롬프트하고 싶지 않습니다. 그래서 위의 방법을 사용했지만 비극적이었습니다. 입력을 중단하고 500 밀리 초가 프롬프트를 기다렸으며 입력 프로세스 중에 전혀 프롬프트가 없었습니다. 나는 코드를보고 그것이 사실이 아니라는 것을 알았습니다. 사용자가 맹목적으로 입력하는 한 500 밀리 초 이내에 키보드를 누르면 프롬프트 기능이 지속적으로 지연됩니다. 이것은 내가 멈췄을 때만 촉진 될 것입니다.
기능 조절에 따라 고정 시간에 한 번 실행할 수 있습니까?
작은 변화
온라인으로 검색했으며 두 번째 작문 방법을 기반으로 일부 변경을 할 수 있으며 (첫 번째는 기능의 여러 변수를 확장하기에는 약간 나쁩니다) 고정 간격을 실행해야하므로 매개 변수를 추가합니다.
함수 스로틀 (메소드, 지연, 지속 시간) {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);}, 지연); }}}이런 식으로, 우리는 간격의 길이를 결정할 것입니다. 설정 시간이 초과되면 즉시 실행합니다. 방금 예제를 사용하여 효과를 시도하십시오
Window.onResize = 스로틀 (ResizeHandler, 100,200);
빈번한 실행 또는 최종 실행이 없다는 것은 사실입니다.
JavaScript 관련 컨텐츠에 대한 자세한 내용은이 사이트의 주제를 확인하십시오. "JavaScript 스위칭 효과 및 기술 요약", "JavaScript 검색 알고리즘 기술 요약", "JavaScript 애니메이션 효과 및 기술 요약", "Javascript 오류 및 디버깅 기술의 요약" "JavaScript 기술의 요약" "" "요약" "", Malgority Sknickes의 요약 "". JavaScript Traversal 알고리즘 및 기술 "및"JavaScript 수학 연산 사용 요약 "
이 기사가 모든 사람의 JavaScript 프로그래밍에 도움이되기를 바랍니다.