手振れ防止と節流関数

手振れ防止関数で解決された問題:
誤操作防止など、クリックなどのイベントによる複数の通信要求を複数回出力します.
手振れ防止コードは以下の通りです.

const debounce = (fn, delay = 1000) => {
  let timer = null;
  return (...args) => {
    console.log(`clear timer:`, this.timer);  //    this.
    console.log(`_that===this :`, _that === this);
    clearTimeout(this.timer);
    this.timer = setTimeout(() => {
      fn.apply(this, args);
    }, delay);
    console.log(`timer value:`, this.timer);
  };
};

html占用呼び出し

     
function clickFun(){
alert(''  ");
}

節流関数で解決された問題:
DOmレイアウトが頻繁なResizeの場合は、スロットル関数を使用して、リフローまたは再描画の回数を減らす必要がある.
スロットル関数コードは以下の通りです.

 const throttle=(fn,delay=1000)=>{
      let flag=false;
      return (...args)=>{
        if(this.flag)return;
          this.flag=true;
          setTimeout(() => {
            fn.apply(this,args);
            this.flag=false;
          }, delay);
      }
    }

htmlで呼び出し:

     
function clickFun(){
alert(''  ");
}

TODO:今度は先端性能の最適化に関する文章を書きます.