JavaScript 주제 4: 조절-JS 튜토리얼-php.cn

JavaScript 주제 4: 조절

coldplay.xixi

풀어 주다： 2021-03-05 09:41:19

앞으로

2444명이 탐색했습니다.

머리말
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>

로그인 후 복사

효과는 다음과 같습니다.

JavaScript 주제 4: 조절

1. 핵심 및 기본 구현

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

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

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

타이머 아이디어

1.1 타임스탬프 아이디어

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

지금

now；
然后减去之前执行时的时间戳(首次值为 0 ) 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; // 更新上一次触发的时间
        }
    }}

로그인 후 복사

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

JavaScript 주제 4: 조절

我们可以看到：

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

1.2 定时器思路

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

创建定时器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);
    }}

로그인 후 복사

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

JavaScript 주제 4: 조절

但是，我们可以看到：

当鼠标移入的时候，事件不会立刻执行;
鼠标定制后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🎜🎜 🎜(동영상)🎜🎜🎜

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

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