アンチシェイクとスロットルの違いは何ですか？アプリケーションのシナリオは何ですか？原則は何ですか？ネイティブを達成する方法は？

サイズ変更、スクロール、キーダウン、キーアップ、キー押下、マウス移動など、ブラウザの一部のイベント。これらのイベントは頻繁にトリガーされ、これらのイベントにバインドされたコールバック関数は継続的に呼び出されます。このようなブラウザの目的は、情報の一貫性を確保することであり、これは私たちにとってリソースの浪費です。
したがって、防振とスロットルは、パフォーマンスの最適化の知識として厳密に計算する必要があります。

コンセプト：アンチシェイクとは、コードロジックが一定期間内に実行されないことを意味します。イベントがトリガーされると、n秒後に実行され、トリガーが繰り返されると、次のようにn秒間遅延されます。トリガーされたイベントが終了し、n秒後にコード
セクションが実行されます。フローとは、イベントをトリガーしたときのコードロジックに、イベントをトリガーするための固定時間があります。

違い：コードロジックを実行すると、アンチシェイクの遅延はありますが、スロットルの遅延はありません。時間の概念を理解しているのは良い赤ちゃんです！??????????? ?????????????????????????????????????????????????? ?????????????????????????????????????????????????? ?????????????????????????????????????????????????? ?????????????????????????????????????????????????? ?????????????????????????????????????????????????? ?????????????????????????????????????????????????? ?????????????????????????????????????????????????? ?????????????????????????????????????????????????? ?????????????????????????????????????????????????? ?????????????????????????????????????????????????? ?????????????????????????????????????????????????? ?????????????????????????????????????????????????? ?????????????????????????????????????????????????? ?????????????????????????????????????????????????? ????????????????????????????????????????????

アンチシェイク：アプリケーションシナリオ：

原則：たとえば
、次のように、mousemoveイベント

コードを記述しました。

   <div class="box">

    </div>
        //  js代码：
        var index = 0;
        var box = document.querySelector('.box')

        function getAction(e) {
            console.log(this)  // 输出当前得this指向
            console.log(e)  // 输出当前得事件对象
            index++;
            box.innerHTML = index
        }
        getAction()
        //box.onmousemove = getAction  // getAction里面this指向dom e表示事件对象
        box.onmousemove = debounce(getAction, 2000)  // 对getAction防抖
        // getAction里面this指向window e undefined

        // func代表对那个高频函数进行防抖，wait代表防抖得时间间隔
        function debounce(func, wait) {
            var timeout;
            return function () {
                console.log(this)  // 指向dom div
                var _this = this   // 改变this得指向
                var args = arguments  // e就不会undefined了
                clearTimeout(timeout)
                timeout = setTimeout(function () {
                    func.apply(_this, args)   // this经过处理后this指向dom div
                }, wait)
            }
        }

スロットル
アプリケーション：プルアップローディング、スクロールバー
原理：

コード：

       <div class="box">

       </div>
       // js代码
        var index = 0;
        var box = document.querySelector('.box')
        function getAction(e) {
            index++;
            box.innerHTML = index
        }
        getAction()
        box.onmousemove = throttle(getAction, 2000)

        // 俩种实现方式 ：时间戳 计时器
        function throttle(func, wait) {
            var timeout
            var _this;
            var args;


            return function () {
                _this = this;
                args = arguments
                if (!timeout) {
                    timeout = setTimeout(function () {
                        func.apply(_this, args)
                        timeout = null   // !!null = false
                    }, wait)
                }
            }
        }