JavaScript トピック 4: スロットル

#目次

序文
• 1. コアおよび基本的な実装
2. スロットリングの詳細
• 最後に記述します

(無料学習の推奨事項: 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 回だけ実行されます。

スロットリングの実装に関しては、次の 2 つの主流の実装方法があります。

タイムスタンプのアイデア

1. タイマーのアイデア
2. 1.1 タイムスタンプのアイデア

名前が示すように、時間間隔は 2 つのタイムスタンプによって制御されます。イベントがトリガーされると、次のようになります。タイムスタンプ

now

;

次に、前の
1. 実行のタイムスタンプを減算します (最初の値は 0) prev
;
2. bignow - prev > wait の場合、時間間隔のメンテナンスが終了したことが証明され、指定されたイベントが実行され、prev
;
3. によると更新されます。このアイデアに基づいて、コードの最初のバージョンを実装できるようになりました: <pre class="brush:php;toolbar:false">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 &gt; wait) {             func.apply(_this, arg); // 允许传入参数，并修正this             prev = now; // 更新上一次触发的时间         }     }}</pre> それを使ってどのような効果が得られるか見てみましょう:

# #次のことがわかります:

マウスが移動すると、 イベントがすぐに実行されます

1 秒ごとに 1 回実行され、実行されます2.5 秒間の移動後に 2 回、つまりアクション

1. は停止後に再度実行されません。
1.2 タイマーのアイデア
2. タイマーを使用して、間隔内のイベントのトリガー数を確保します

タイマーを作成します

timer

、現在

期間

内にあるかどうかを記録します;

1. タイマーが存在するかどうかを確認し、存在する場合は直接終了し、存在しない場合はイベントが実行されます; wait time その後、再度実行してタイマーをクリアします。
2. イベントがトリガーされると、タイマーを設定します。イベントが再度トリガーされると、タイマーが存在する場合、タイマーが実行されるまで実行されません。その後、タイマーをクリアする関数を実行して、次のタイマーを設定できるようにします。

3. 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

一定の間隔を置いてから一度実行されます

1. 1.3 2 つのアイデアの違い

##タイムスタンプ

タイマーn 秒後に実行2 つの組み合わせ完了するためのアイデアはすぐに実行でき、トリガーを停止した後に再度実行するスロットル メソッド:

// 第三版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;}

効果は次のように実証されます:

	"開始点"	すぐに実行
"終了点"	停止後は実行されません	Stop は再度実行されます
	2. スロットルの進歩

コードを見ながら、繰り返し印刷してみました。なぜこれを行うのかを理解できるのはデータだけです。頑張りましょう~

関連する無料学習の推奨事項:

javascript

(ビデオ)

以上がJavaScript トピック 4: スロットルの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。