목차
머리말
또 다른 최적화 기능인 조절에 대해 이야기해 보겠습니다. 모바일 이벤트를 예로 들어보겠습니다nbsp;html> <meta> <meta> <meta> <title>Document</title> <style> #wrapper { width: 100%; height: 140px; background: rgba(0, 0, 0, 0.8); color: #fff; font-size: 30px; font-weight: bold; line-height: 140px; text-align: center; } </style> <p></p> <script> var count = 1; function moveAction () { oWrapper.innerHTML = count++; } var oWrapper = document.querySelector('#wrapper'); oWrapper.onmousemove = moveAction; </script>
1. 핵심 및 기본 구현
조절 원리는 매우 간단합니다.이벤트를 계속해서 트리거하면 , 특정 시간 간격 내에서 한 번만 실행됩니다.
제한 구현과 관련하여 두 가지 주요 구현 방법이 있습니다.
지금
제거합니다. now
;prev
;now - prev > wait
,证明时间区间维护结束,执行指定事件,更新prev
;根据这一思路,我们就可以实现第一版代码了:
oWrapper.onmousemove = throttle(moveAction, 1000);function throttle(func, wait) { var _this, arg; var prev = 0; // 上一次触发的时间,第一次默认为0 return function () { var now = Date.now(); // 触发时的时间 _this = this; if (now - prev > wait) { func.apply(_this, arg); // 允许传入参数,并修正this prev = now; // 更新上一次触发的时间 } }}
来看看借助它,效果是什么样的:
我们可以看到:
利用定时器来保证间隔时间内事件的触发次数
timer
,记录当前是否在周期内;wait
时间之后再次执行,并清掉定时器;当触发事件的时候,我们设置一个定时器,再触发事件的时候,如果定时器存在,就不执行,直到定时器执行,然后执行函数,清空定时器,这样就可以设置下个定时器。
function throttle(func, wait) { var _this, arg; var timer; // 初始化 return function () { _this = this; // 记录this arg = arguments; // 记录参数数组 if (timer) return; // 时候未到 timer = setTimeout(() => { func.apply(_this, arg); // 允许传入参数,并修正this timer = null; }, wait); }}
来看看借助它,效果是什么样的:
但是,我们可以看到:
wait
그런 다음 이전 prev code >;값이 now - prev > wait
이면 시간 간격 유지 관리가 끝났음을 증명하고 지정된 이벤트를 실행하며 prev
를 업데이트합니다.
이 아이디어에 따르면, 이제 코드의 첫 번째 버전을 구현할 수 있습니다:
// 第三版function throttle(func, wait) {
var timeout, context, args, result;
var previous = 0;
var later = function() {
previous = +new Date();
timeout = null;
func.apply(context, args)
};
var throttled = function() {
var now = +new Date();
//下次触发 func 剩余的时间
var remaining = wait - (now - previous);
context = this;
args = arguments;
// 如果没有剩余的时间了或者你改了系统时间
if (remaining wait) {
if (timeout) {
clearTimeout(timeout);
timeout = null;
}
previous = now;
func.apply(context, args);
} else if (!timeout) {
timeout = setTimeout(later, remaining);
}
};
return throttled;}
로그인 후 복사
이 코드의 도움으로 효과가 어떤지 살펴보겠습니다:
다음을 볼 수 있습니다:
마우스가 들어가면 이벤트가 즉시 실행됩니다
1초마다 한 번씩 실행되며, 동작은 2.5초에 두 번 실행됩니다. 즉, 해당 동작이 중지된 후에는 다시 실행되지 않습니다.
1.2 타이머 아이디어
타이머를 사용하여 간격 내의 이벤트 트리거 수를 보장하세요
타이머 타이머
를 만들어 현재 시간이 기간 내에 있는지 기록하세요. 타이머가 있는지 판단하세요. 존재하면 바로 종료됩니다. 그렇지 않으면 이벤트가 실행됩니다.
wait
는 해당 시간 이후에 다시 실행되고 타이머는 지워집니다. 이벤트가 발생하면 타이머를 설정하고, 이벤트가 발생했을 때 타이머가 존재하면 타이머가 실행될 때까지 실행되지 않으며, 그 후에는 타이머를 지우는 기능이 실행되어 다음 타이머를 설정할 수 있습니다.
rrreee사용 효과를 살펴보겠습니다:
그러나 다음을 볼 수 있습니다.
마우스를 안으로 이동하면 이벤트가 즉시 실행되지 않습니다. 마우스를 사용자 정의한 후 다음에 실행됩니다. 대기
간격 한 번
1.3 두 아이디어의 차이
🎜🎜🎜🎜"시작점"🎜🎜즉시 실행🎜🎜실행 n초 후 🎜 🎜🎜🎜"종료" 🎜🎜정지 후 실행되지 않음 🎜🎜정지 후 다시 실행됨 🎜🎜🎜🎜🎜🎜 2. Throttling Advance🎜🎜🎜두 가지 아이디어를 결합하여 실행 가능한 Throttling 방식 완성 중지가 발생한 후 즉시 실행됩니다. :🎜rrreee🎜효과는 다음과 같습니다.🎜🎜🎜🎜🎜코드를 볼 때 왜 완료되었는지 이해하기 전에 데이터를 반복해서 인쇄해야 했습니다. 함께 일해요~🎜🎜🎜🎜관련 무료 학습 추천: 🎜🎜🎜javascript🎜🎜 🎜(동영상)🎜🎜🎜
위 내용은 JavaScript 주제 4: 조절의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!