JAvascriptイベントスロットルと振れ防止

イベントスロットルと振れ防止は開発中にパフォーマンスの問題を解決するためであり、onscroll、onresize、buttonを頻繁にクリックするなどよく見られる.
イベントスロットル
1つの時間間隔を設けて、時間間隔内で1回しか実行できません.バスターミナルのバスのように、時間になってから行きます.
質問:
数年前にonresizeの問題に遭遇し、ページがいっぱいになってレイアウトされ、モジュールの多くのdom構造も比較的複雑です.そのため、ウィンドウが頻繁に大きく変化すると、ページの反応が異常にカートンします.
解決策:
正直性能の問題だと思っていたのですが、どうやって解決するのか分からず、いろいろな問題を検索して、最後にhttps://stackoverflow.comが見つかりました.残念ながら具体的なリンクは忘れてしまいました.しかし、この問題のため、宋語はこのサイトを好きになって、問題の答えはとても頼りになります.

//             

window.onresize = () => {
      console.log('resize')
}

勝手に150回以上実行したのがカートンの根源だ.
この問題を解決するには、実行回数を減らす必要があります.

          let timer = null
          window.onresize = () => {
                console.log(timer)
                if (!timer) {
                    timer = setTimeout(() => {
                        callBack()
                        timer = null
                    }, 1000)
                }
            }

            function callBack() {
                console.log('resize')
            }

このように私達は1秒の内に何回callBackを揺さぶってただ1回だけ実行して、問題は解決して次にカプセル化します

//          ，                onersize、          、callBack     。

**       callBack，       ，        

            function callBack() {
                console.log('resize')
            }

            function throttle(callBack, time) {
                let timer = null
                //timer       ，        
                return function() {
                    if (!timer) {
                        timer = setTimeout(() => {
                            callBack()
                            timer = null
                        }, time)
                    }
                }
            }

            window.addEventListener('resize', throttle(callBack, 1000), false)

テストは完璧です!
イベントブレ防止
コードのブラシを検証するのによく使われ、ボタンを頻繁にクリックすると、サービス側に何度も要求され、圧力をかける.コードを見てみろ
//需要はinput入力内容停止間隔1000 ms後にcallbackをトリガーする

            let oInput = document.querySelector('input')
                // oInput.addEventListener('input', function(e) {
                //     //      onInput   ，       
                //     console.log(e, this)
                // })

            oInput.addEventListener('input', debounce(callback, 500))

            function debounce(fn, delay) {
                let timer = null
                    //      this
                let self = this
                return function() {
                    let arg = arguments
                        //        
                    clearTimeout(timer)
                        //        ，           
                    timer = setTimeout(() => {
                        //   this，     callback。           ok
                        fn.apply(this, arg)
                    }, delay)
                }
            }

            function callback(e) {
                console.log('  ', e.target.value)
            }

            function callback(e) {
                console.log('  ', e.target.value)
            }

多くの内容を入力して最後にcallbackをトリガーして、効果は完璧です!
あなたのツッコミorいいねは私の原動力です!