VUEシェイクスロットリング機能 - デバイスパッケージ

画像安定化（デバウンス）

所謂防振機能のみn秒場合、トリガ・イベントの後n秒に一度実行し、イベントをトリガすることができ、それは関数の実行時間を再計算することです。

スロットル（スロットル）

いわゆるスロットリングは、連続トリガイベントを指しますがn秒で一度だけの機能。希釈を絞ることは、周波数の関数です。

等価、滴下蛇口は、使い捨てのドリップが多くを落とすかもしれないが、私たちは、周波数を保ち、それを水の500msごとのドロップをしたいです。私たちは、それが許容頻度で繰り返し呼び出される関数であると思います。

VUEパッケージutils.js

CONSTデバウンス=（FUNC、時間、isDebounce、CTX）=> {
     VARのタイマー、lastCall、RTN。
    // 防抖函数
    であれば（isDebounce）{ 
        RTN =（...のparams）=> {
             場合（タイマー）てclearTimeout（タイマー）。
            タイマー =のsetTimeout（（）=> { 
                func.apply（CTX、paramsは）; 
            }、時間）。
        }。
    } 他 { // 节流函数 
        RTN =（...のparams）=> { 
            constの今 = 新しい日付（）getTime（）;
            もし（今- lastCall <時間&& lastCall）リターン。
            lastCall = 今; 
            func.apply（CTX、paramsは）。
        }。
    } 
    戻りRTN。
}。

輸出のデフォルト{ 
    名： 'デバウンス' 、
    抽象的：真、
    小道具：{ 
        時間：{ 
            タイプ：Number、
            デフォルト：800 、
        }、
        イベント：{ 
            タイプ：文字列、
            デフォルト： 'クリック' 、
        }、 
        isDebounce：{
            タイプ：ブール、
            デフォルト：偽、
        } 
    }、
    作成（）{ 
        この .eventKeys = この .events.split（ '' ）。
        この .originMap = {};
        この .debouncedMap = {}; 
    }、 
    （）{ レンダリング
        CONSTのvnode = この。$スロット。デフォルトの [0 ];
        この .eventKeys.forEach（キー=> { 
            CONST目標 = vnode.data.on [キー];
             場合（目標=== この [キー] .originMap &&この .debouncedMap [キー]）{ 
                vnode.data.on [キー] = この.debouncedMap [キー]。
            } そう であれば（ターゲット）{
                 この .originMap [キー] = ターゲット。
                この .debouncedMap [キー] = デバウンス（
                    目標、
                    この.time、
                     この.isDebounce、
                    vノード
                ）。
                vnode.data.on [キー] = この.debouncedMap [キー]。
            } 
        }）。
        リターンのvnode。
    }、
}。

その後、我々は内部グローバルmain.jsエントリファイルに登録します

「@ /設定/デバウンス」からインポートデバウンス

Vue.component（「デバウンス」、デバウンス）

使用

<！ - 時間は、防振機能を、isDebounceスロットリング機能、時間間隔が行われ示すisDebounceがある！- > 
    < デバウンス：時間= '1000' isDebounce > 
        < ボタン   @click = 'BTN' > BTN < / ボタン> 
    </ デバウンス>

転載：https://juejin.im/post/5db114c3e51d452a1c03e25b