ジッタ絞り

同じ点:一定時間後に対応するイベントを粗く送信します.
違い:ブレ防止には「遅延」があり、スロットルにはこの特性はありません.
 
ブレ止め
ブレ防止は実は遅延トリガであり、この遅延に注意することがポイントです.現在の遅延時間が5 sであると仮定すると、最初にイベントをトリガした後、5 s遅延します.この5 s内で、このイベントをトリガすると、5 s遅延することがあります.つまり、ジッタ防止には「遅延」という特性があります.
 
settimeoutを使用してイベント関数を直接呼び出す
イベントがトリガーされるたびにtimerをクリアします.
settimeouを使用して直接イベントをトリガーするのは面倒ですが、コールバック関数のthisとパラメータを設定できないので、ここでsettimeoutを書き換えました

12313

    function debound(await,handleFn){
        //             ，   debound    
        //     this.ifFrist  ，           ，      this     
        //            ，             
        var ifFrist = false;
        var timer = null;//       timer
        var paramt =
        return function () {//        
            //             ， window  
            // this=》window args  window        
            let context = this;
            let args = arguments;

            if(!ifFrist){
                /**
                 *       apply，  call  bind？
                 * bind      ，     
                 * call            ，       {args},      
                 * apply        
                 */
                handleFn.apply(context,args);
                ifFrist = !ifFrist;
            }else{
                if(timer==null){
                    timer = window.setTimeout(handleFn,await,context,args);
                }else{
                    window.clearTimeout(timer);
                    timer = window.setTimeout(handleFn,await,context,args);
                }
            }
        }
    }
    let btn = document.getElementById("mybtn");
    btn.addEventListener("click",debound(5000,handle));
    function handle(a){
        console.log("123",this,a);
    }

    //   settimeout
    var _st = window.setTimeout;
    window.setTimeout = function(fRef, mDelat,content,paramt) {
        if(typeof fRef === 'function'){
            var f = function(){ fRef.apply(content, paramt); };
            return _st(f, mDelat);
        }
        return _st(fRef,mDelat);
    };

 
settimeout間接呼び出し関数の使用

12313

    /*
     *    settimeout       ，  settimeout  this     bug
     * @param func
     * @param wait
     * @returns {Function}
     */
    function debounce(Fn,await){
        timer = null;
        return function () {
            var content = this;
            var arg = arguments;

            //  null,      ，        ,    
            if(timer){
                clearTimeout(timer);
                timer = setTimeout(function () {
                    timer = null;
                },await)
            }
            if(!timer) {
                Fn.apply(content, arg);
                timer = setTimeout(function () {
                    timer = null;
                },await)
            }
        }
    }
    let btn = document.getElementById("mybtn");
    btn.addEventListener("click",debounce(handle,2000));
    function handle(){
        console.log("123",this);
    }

 
スロットル:
スロットルを5 sに設定すると、最初のトリガ後、5 s以内にトリガされ、応答はありませんが、「遅延」はありません.
 

    function throttle(Fn,await) {
        var perTime = 0;
        return function () {
            let context = this;
            let args = arguments;
            let currentTime = Date.now();
            if(currentTime-perTime>=await){
                Fn.apply(content,args);
                perTime = Date.now();
            }
        }
    }