ジッタ防止代理店

3つの一般的なシーンジッタ防止エージェント
ブレ止め
関数の実行に適切な間隔を設定し、イベントが間隔内で頻繁にトリガーされないようにします.settimoutは、timeoutが存在するかどうかを判断し、存在する場合は破棄し、新しいタイマを作成して共通の関数を抽出し、より複雑な状況を考慮することができます.

パラメータと戻り値が

にどのように渡されるか

ブレ止め後の関数はすぐに実行できますか?

ブレ止め関数は手動でキャンセルできますか?

Promise

を返すことが望ましい

 const debounce = (func, wait=0) =>{
                let timeout  = null
                let args
                function debounce (...arg) {
                    args = arg
                    if(timeout){
                        clearTimeout(timeout)
                        timeout = null 
                    }
                    return new Promise((res, rej)=>{
                        timeout = setTimeout(async()=>{
                            try {
                                const result = await func.apply(this, args)
                                res(result)
                            } catch (e) {
                                rej(e)
                            }
                        },wait)
                    })
                  }

                  function cancel(){
                      clearTimeout(timeout)
                      timeout = null
                  }
                  function flush(){
                      cancel()
                      return func.apply(this, args)
                  }
                  debounce.cancel = cancel
                  debounce.flush = flush
                  return debounce
            }

しぼり
指定した時間内に1回だけ関数を呼び出すように設定し,関数呼び出し周波数を低減することをスロットルと呼ぶ.スロットル関数の実装はジッタ防止関数と同様であるが,スロットル関数には2つの実行方式があり,関数の呼び出し時に最初の呼び出しを実行するか,それとも最後の呼び出しを実行するかで,タイムスタンプを設定して判断する.

 const throttle  = (func, wait=0, execFristCall) =>{
                let timeout = null
                let args
                let fristCallTimestamp
                function throttle(...arg) {
                    //        
                    if(!fristCallTimestamp) fristCallTimestamp = new Date().getTime() 
                    if(!execFristCall || !args){
                        args  = arg
                    }
                    if(timeout){
                        clearTimeout(timeout)
                        timeout = null
                    }

                    return new Promise( async (res,rej)=>{
                        if(new Data().getTime()- fristCallTimestamp >=wait){
                            try {
                                const result = await func.apply(this, args)
                                res(result)
                            } catch (e) {
                                rej(e)
                            }finally{
                                cancel()
                            }
                        }else {
                            timeout = setTimeout(async ()=>{
                                try {
                                    const result = await func.apply(this, args)
                                    res(result)
                                } catch (e) {
                                    rej(e)
                                }finally{
                                    cancel()
                                }
                            }, fristCallTimestamp + wait - new Date().getTime())
                        }
                    })
                    //     
                    function cancel() {
                        clearTimeout(timeout)
                        timeout = null
                        args = null
                        fristCallTimestamp = null
                    }
                 //       
                 function flush() {
                     cancle()
                     return func.apply(this, args)
                 }
                 throttle.cancel = cancel
                 throttle.flush = flush
                 return throttle
                }

スロットル関数とジッタ防止関数は、実行を遅らせ、呼び出し回数を減らすことで、頻繁に呼び出される関数のパフォーマンスを最適化します.異なる点は、一定期間の頻繁な呼び出しに対して、ジッタ防止は実行遅延後の呼び出しであり、スロットルは遅延タイミング複数回の呼び出しである
エージェント
イベントエージェントまたはイベント委任イベントエージェントの実現原理は,DOMイベントのトリガフローを用いて一種類のイベントを統一的に処理することである.

DOMイベントのトリガフロー

キャプチャ

ターゲット

発泡

DOMイベント基準について

//    

//   
document.querySelector("input").onClick = function(e) {
// ....
}
//    
document.querySelector("input").addEventLister('click',function(e){
// ...
})

方式1と方式2はDOM 0規格に属し、この方式でイベント傍受を行うことで上書きされる以前の傍受関数方式3はDOM 2規格に属するので、この方式を推奨する.同じ要素上のイベントリスニングは互いに影響を及ぼさず、独立して呼び出すことができ、呼び出し順序とリスニング順序が一致します.