> 웹 프론트엔드 > JS 튜토리얼 > JavaScript 주제 4: 조절

JavaScript 주제 4: 조절

coldplay.xixi
풀어 주다: 2021-03-05 09:41:19
앞으로
2428명이 탐색했습니다.

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>
로그인 후 복사
효과는 다음과 같습니다.

JavaScript 주제 4: 조절

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; // 更新上一次触发的时间
        }
    }}
로그인 후 복사

来看看借助它,效果是什么样的:

JavaScript 주제 4: 조절

我们可以看到:

  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);
    }}
로그인 후 복사

来看看借助它,效果是什么样的:

JavaScript 주제 4: 조절

但是,我们可以看到:

  1. 当鼠标移入的时候,事件不会立刻执行;
  2. 鼠标定制后wait그런 다음 이전
  3. 실행
의 타임스탬프를 뺍니다(첫 번째 값은 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

사용 효과를 살펴보겠습니다:  여기에 그림 설명 삽입

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

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

JavaScript 주제 4: 조절마우스를 사용자 정의한 후 다음에 실행됩니다. 대기 간격 한 번

1.3 두 아이디어의 차이

타임 스탬프Timer

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

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

관련 라벨:
원천:csdn.net
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿