JavaScript 함수 조절 개념 및 사용 예에 대한 자세한 설명
- 高洛峰원래의
- 2016-12-29 10:04:471368검색
이 문서의 예에서는 JavaScript 함수 조절의 개념과 사용법을 설명합니다. 참고하실 수 있도록 공유해 드리며, 자세한 내용은 다음과 같습니다.
최근 웹페이지를 만들다가 브라우저 창이 바뀌면 일부 페이지 요소의 크기를 변경해야 하는 일이 있어서 자연스럽게 이벤트 생각해서 이렇게 썼습니다
<!DOCTYPE html>
<html>
<head>
<title>Throttle</title>
</head>
<body>
<script type="text/javascript">
n=0;
function resizehandler(){
console.log(new Date().getTime());
console.log(++n);
}
window.onresize=resizehandler;
</script>
</body>
</html>기능은 구현했는데 드래그로 브라우저 창 크기를 바꾸니 콘솔을 보니
예, 간단한 드래그 앤 드롭으로 resizeHandler() 메서드가 52번 실행되었습니다. 이는 제가 원하는 효과가 전혀 아닙니다. 사실 resizeHandler() 메서드의 코드는 매우 복잡하며 심지어 ajax를 사용하여 보내기도 합니다. 간단하다면 창 크기를 한 번 변경하려면 52번 호출해야 하는데 괜찮습니다
기능 제한
사실 원래 의도는 약간의 조정을 하는 것입니다. 창 크기가 조정된 후 페이지로 이동하고 창의 크기 조정 이벤트가 발생하지 않습니다. 크기 조정이 완료된 후에는 발생하지 않지만 구체적인 빈도는 알 수 없지만 창 크기가 더 이상 변경되지 않을 때까지 계속 호출됩니다. 실제로 유사한 메커니즘이 짧은 시간 내에 반복적으로 실행되는 mousemove입니다.
"JavaScript 고급 프로그래밍"에는 이 문제를 해결하기 위한 특수 함수 제한이 있습니다.
function throttle(method,context){
clearTimeout(method.tId);
method.tId=setTimeout(function(){
method.call(context);
},500);
}원리는 매우 간단합니다. 함수 내에서 함수가 다시 호출되면 마지막 호출이 삭제되고 이 호출은 500밀리초 후에 실행되는 식입니다. 이렇게 해서 제가 만든 코드를
<script type="text/javascript">
n=0;
function resizehandler(){
console.log(new Date().getTime());
console.log(++n);
}
function throttle(method,context){
clearTimeout(method.tId);
method.tId=setTimeout(function(){
method.call(context);
},500);
}
window.onresize=function(){
throttle(resizehandler,window);
};
</script>로 바꿔서 드래그 앤 드롭해서 사용해보시면 됩니다. 당연히
다른 방법
인터넷 스트리밍 구성표에도 기능 섹션이 있는데, 이것이 바로 그 기능입니다.
function throttle(method,delay){
var timer=null;
return function(){
var context=this, args=arguments;
clearTimeout(timer);
timer=setTimeout(function(){
method.apply(context,args);
},delay);
}
}전화해서 사용해 보세요. 동일한 효과
<script type="text/javascript">
n=0;
function resizehandler(){
console.log(new Date().getTime());
console.log(++n);
}
function throttle(method,delay){
var timer=null;
return function(){
var context=this, args=arguments;
clearTimeout(timer);
timer=setTimeout(function(){
method.apply(context,args);
},delay);
}
}
window.onresize=throttle(resizehandler,500);//因为返回函数句柄，不用包装函数了
</script>
비교
두 방법 모두 setTimeout을 사용하는데 차이점은 두 번째 방법에 추가된 함수가 실행 시간을 지연시킨다는 점입니다. 이 함수는 추가만 하면 첫 번째 솔루션에서 쉽게 사용할 수 있습니다. 매개변수.
그러나 첫 번째 솔루션은 tId를 함수의 변수로 설정하고 저장하는 반면, 두 번째 솔루션은 이를 저장하기 위한 클로저를 생성합니다. 개인적으로 저는 그 차이가 크지 않다고 생각합니다. 저는 간단하고 효율적인 첫 번째 것을 정말 좋아합니다.
새로운 요구 사항
어느 날 바이두 홈페이지의 자동 입력 프롬프트처럼 비슷한 것을 만들었습니다. 키보드가 나타날 때마다 키업 이벤트를 텍스트에 바인딩했습니다. , 그런데 너무 자주 프롬프트를 표시하고 싶지 않아 위의 방법을 사용했는데, 입력 과정에서 500밀리초 동안 입력을 중지한 후에만 프롬프트가 표시됩니다. 코드를 살펴본 결과 이는 사실이 아닌 것으로 나타났습니다. 사용자가 500밀리초 이내에 키보드를 터치하고 누를 수 있으면 프롬프트 기능이 계속 지연되므로 중지할 때만 프롬프트가 발생합니다. 무의미한.
기능 조절에 따라 일정 간격으로 실행될 수 있나요?
작은 변화
인터넷에서 검색한 후 두 번째 작성 방법을 기반으로 몇 가지 변경을 하면 됩니다(함수에 대해 여러 변수를 확장하는 첫 번째 방법은 약간 나쁘게 느껴집니다). 고정 간격으로 매개변수를 실행해야
function throttle(method,delay,duration){
var timer=null, begin=new Date();
return function(){
var context=this, args=arguments, current=new Date();;
clearTimeout(timer);
if(current-begin>=duration){
method.apply(context,args);
begin=current;
}else{
timer=setTimeout(function(){
method.apply(context,args);
},delay);
}
}
}간격이 얼마나 되는지 판단할 때마다 설정 시간을 초과하면 즉시 실행됩니다. 지금 예시를 통해 효과를 시도해 보세요.
window.onresize=throttle(resizehandler,100,200);
물론 자주 실행되지도 않고 마지막에 실행되지도 않습니다
이 글이 JavaScript 프로그래밍에 종사하는 모든 분들께 도움이 되기를 바랍니다.
자바스크립트 함수 조절 개념과 사용 예에 대한 자세한 설명은 PHP 중국어 홈페이지를 참고해주세요!