性能最適化-手ぶれ防止とスロットル

ドドジャンパー
+.入力ボックスを待ち受け、文字が変化したらchangeイベントを起動する
+.手ぶれを防ぎ、直接keyupイベントを使うと、頻繁にイベントが発生し、性能に影響を与えます.
+.ただし、手ぶれ防止:ユーザー入力が終了したり、一時停止したりした場合、彩画トリガイベント
debounceは一定期間にわたって連続的な関数呼び出しを行います.その関数は一回だけ実行できます.一つのタイマーを維持するには、タイマーが終わってからイベントを継続することができるという原理があります.
実装されていないコードコード(統合理解のため):

let timer = null
let oInput = document.getElementById('input')
oInput.addEventListener('keyup', function(){
  if(timer){
    clearTimeout(timer)
  }
  timer = setTimeout(function(){
    console.log(oInput.value)
  }, 500)
})

 パッケージされたコード:

// setTimeout             
//      ，            ，                  ，                        
function debounce(fn, delay=500){
  //      
  let timer = null
  return function(){
    if(timer){
      clearTimeout(timer)
    }
    //       ，    ES5   ， this   Window
    timer = setTimeout(() => {
      //   fn    ，      ，    event        
      fn.apply(this, arguments)
    }, delay)
  }
}

コードテスト:(一時的に(600 ms)内でdebounce関数が連続してトリガされますが、debounce関数は一回だけ実行されます.ユーザーが文字を入力していない場合、最後の文字を入力して600 msの終了を待つと、funtion(){consolion.logn(oInput.value))をトリガし、タイマーをキャンセルします.

let oInput = document.getElementById('input')
//         ，      
oInput.addEventListener('keyup', debounce(function(){
  console.log(oInput.value)
}, 600))

スロットル
+.要素をドラッグするときは、その要素がドラッグされた位置をいつでも持っていきます.
+.直接ドラゴ事件を使うと、頻繁に触発され、使いやすくなります.
+.ただし、スロットルを使用すると、ドラッグ速度が複数のブロックであっても、100 msごとにトリガされます.
スロットル:一定期間の関数呼び出しは、イベントが必ず一回実行されることを保証します.スロットルは一定期間で関数が必ずトリガされることを保証します.
未実装コード(統合用):

const oDiv1 = document.getElementById('div1')
let timer = null
oDiv1.addEventListener('drag', function(e){
  if(timer) {
    return false//           
  }
  // timer         
  timer = setTimeout(function () {
    // console.log(timer)
    console.log(e.offsetX, e.offsetY)
    //   timer null，           
    timer = null//    null，           
  }, 500)// 500       ，  timer   ，        ，       
})

パッケージ後のコード:

//      ，         ，             ，                  
function throttle(fn, delay=100){
  let timer = null
  return function(){
    // let _this = this
    // let arg = arguments
    if(timer){
      return false
    }
    timer = setTimeout(() => {//       ，  ES5   this   window
      fn.apply(this, arguments)
      timer = null
    }, delay)
  }
}


// test
const oDiv1 = document.getElementById('div1')
oDiv1.addEventListener('drag', throttle(function (e) {
  console.log(e.offsetX, e.offsetY)
},1000))

テスト
ドラッグすると、最初の100 ms以内は実行されません.100 msになると、上の矢印関数体が一回実行されます.その後、関数体のtimer=nullがreturnの関数体を飛び出すので、最後に次の100 msの動作を繰り返します.

const oDiv1 = document.getElementById('div1')
oDiv1.addEventListener('drag', throttle(function (e) {
  console.log(e.offsetX, e.offsetY)
}, 100))

手ぶれ防止の典型的なケースは入力検索です.入力が終わってからn秒以内に検索要求を行います.n秒以内にまた入力した内容は、再計算します.
スロットルの典型的なケースはマウスが絶えずクリックしてトリガします.n秒以内に何度もクリックすると一回だけ有効になります.