JavaScript 주제 4: 조절

목차

• 머리말
• 1. 핵심 및 기본 구현
• 2. Throttling Advanced
• 마지막에 작성

javascript 비디오 튜토리얼 )

머리말

또 다른 최적화 기능인 조절에 대해 이야기해 보겠습니다.

모바일 이벤트를 예로 들어보겠습니다

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(&#39;#wrapper&#39;);
		oWrapper.onmousemove = moveAction;
    </script>

효과는 다음과 같습니다.

1. 핵심 및 기본 구현

조절 원리는 매우 간단합니다.

이벤트를 계속해서 트리거하면 , 특정 시간 간격 내에서 한 번만 실행됩니다.

제한 구현과 관련하여 두 가지 주요 구현 방법이 있습니다.

타임 스탬프 아이디어
1. 타이머 아이디어

1.1 타임스탬프 아이디어

이름에서 알 수 있듯이 시간 간격은 두 개의 타임스탬프를 통해 제어됩니다. 이벤트가 트리거되면:

현재 타임스탬프를 지금 제거합니다.
1. now；
2. 然后减去之前执行时的时间戳(首次值为 0 ) prev；
3. 如果大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; // 更新上一次触发的时间
        }
    }}

来看看借助它，效果是什么样的：

我们可以看到：

1. 当鼠标移入的时候，事件立刻执行
2. 每过 1s 会执行一次，且移动2.5s会执行2次，意味着动作停止后不会再执行。

1.2 定时器思路

利用定时器来保证间隔时间内事件的触发次数

1. 创建定时器timer，记录当前是否在周期内；
2. 判断定时器是否存在，若存在则直接结束，否则执行事件；
3. 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);
    }}

来看看借助它，效果是什么样的：

但是，我们可以看到：

1. 当鼠标移入的时候，事件不会立刻执行;
2. 鼠标定制后wait그런 다음 이전
실행

의 타임스탬프를 뺍니다(첫 번째 값은 0입니다) prev code >;

값이 now - prev > wait이면 시간 간격 유지 관리가 끝났음을 증명하고 지정된 이벤트를 실행하며 prev를 업데이트합니다.이 아이디어에 따르면, 이제 코드의 첫 번째 버전을 구현할 수 있습니다:마우스가 들어가면 이벤트가 즉시 실행됩니다1초마다 한 번씩 실행되며, 동작은 2.5초에 두 번 실행됩니다. 즉, 해당 동작1.2 타이머 아이디어타이머를 사용하여 간격 내의 이벤트 트리거 수를 보장하세요기간wait는 해당 시간 이후에 다시 실행되고 타이머는 지워집니다. 이벤트가 발생하면 타이머를 설정하고, 이벤트가 발생했을 때 타이머가 존재하면 타이머가 실행될 때까지 실행되지 않으며, 그 후에는 타이머를 지우는 기능이 실행되어 다음 타이머를 설정할 수 있습니다.

// 第三版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;} 이 코드의 도움으로 효과가 어떤지 살펴보겠습니다:		다음을 볼 수 있습니다:
	이 중지된 후에는 다시 실행되지 않습니다.
	타이머 타이머를 만들어 현재 시간이	내에 있는지 기록하세요. 타이머가 있는지 판단하세요. 존재하면 바로 종료됩니다. 그렇지 않으면 이벤트가 실행됩니다.

rrreee

사용 효과를 살펴보겠습니다:

그러나 다음을 볼 수 있습니다.

마우스를 안으로 이동하면 이벤트가 즉시 실행되지 않습니다.

마우스를 사용자 정의한 후 다음에 실행됩니다. 대기 간격 한 번

1.3 두 아이디어의 차이

타임 스탬프Timer

🎜🎜🎜🎜"시작점"🎜🎜즉시 실행🎜🎜실행 n초 후 🎜 🎜🎜🎜"종료" 🎜🎜정지 후 실행되지 않음 🎜🎜정지 후 다시 실행됨 🎜🎜🎜🎜🎜🎜 2. Throttling Advance🎜🎜🎜두 가지 아이디어를 결합하여 실행 가능한 Throttling 방식 완성 중지가 발생한 후 즉시 실행됩니다. :🎜rrreee🎜효과는 다음과 같습니다.🎜🎜🎜🎜🎜코드를 볼 때 왜 완료되었는지 이해하기 전에 데이터를 반복해서 인쇄해야 했습니다. 함께 일해요~🎜🎜🎜🎜관련 무료 학습 추천: 🎜🎜🎜javascript🎜🎜 🎜(동영상)🎜🎜🎜

위 내용은 JavaScript 주제 4: 조절의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!