JavaScript でのデバウンスとスロットルの詳細な紹介 (コード例)

この記事では、JavaScript のデバウンスとスロットリングについて詳しく説明します (コード例)。必要な方は参考にしていただければ幸いです。

インタビューであっても、ブラウザの最適化について議論する場合でも、デバウンスとスロットルの問題が関係します。
一般に、これら 2 つはイベントのトリガー頻度を制限する方法です。違いは、スロットリングではイベントがトリガーされる時間間隔を指定するのに対し、デバウンスではイベントがトリガーされない時間間隔を指定することです。結果から判断すると、スロットリングにより時間処理の感度が低下します。デバウンス中は、トリガーとなるイベントが最初に保存され、指定されたイベント間隔を超えた後に一緒に送信されます。
ますますめまいがするので、コードに直接進みます。
HTML

<input type="text" oninput="fatch()">

ユーザーが検索するための input タグと、処理関数 catch があります。入力イベントによってトリガーされ、このキャッチは入力の値に基づいて背景から関連する単語を要求します。
上記のコードのアイデアには問題はありませんが、トリガーの制限がない場合、大量の http リクエストが生成される可能性があり、これらのリクエストの多くはあまり重要ではないため、以下の最適化の余地が与えられます。この問題を解決するには、スロットリングとデバウンスという 2 つのアイデアが使用されます。 (通常、入力状況ではデバウンスが使用されます。これはコードの説明の便宜のためです)

Throttling

function jieliu (func, time){//func 执行函数， time 时间间隔
  let lastRun = null
  
  return function(){
    const now = new Date()
    if(now - lastRun > time){
      func(...arguments)
      lastRun = now
    }
  }
}


const listener = jieliu(function(value){//监听函数，指定间隔时间
  console.log(value)
}, 1000)

const input = document.querySelector("input")
//调用方法
input.addEventListener("input", function(event){
     listener(event.target.value)
})

上記は、比較的単純なスロットルの実装と基本的な呼び出しメソッドの使用です。各実行の lastRun を保存することです。リクエストの頻度を制限する要件は基本的に実装されていますが、最後のリクエストのトリガーは無視されます。
改善点は次のとおりです:

function jieliu (func, time){// 触发时间间隔>time 发送请求
  let lastRun = null
  let timeout = undefined
  return function(){
    const self = this; 
    const now = new Date()
    if(now - lastRun > time){
      if(timeout){
        clearTimeout(timeout)
        timeout = undefined
      }
      func.apply(self, arguments)
      lastRun = now
    }
    else{
      if(!timeout){
        timeout = setTimeout(func.apply(self, arguments), time)
      }
    }
  }
}

それが最後のリクエストであるかどうかを判断するタイムアウトを追加します。

Debounce

function qudou(func, time){
  let timeout = undefined
  
  return function(){
    const argu = arguments
    const self = this

    if(timeout){
      clearTimeout(timeout)
      timeout = undefined
    }else{
        timeout = setTimeout(func.apply(this, arguments), time)
    }
  }
}

上記は debounce の単純な実装です。同様に、最後のイベントは処理関数をトリガーできません。

改善点は次のとおりです:

function qudou(func, time){//判断连续time时间内不触发，发送func请求
  let timeout = undefined;
  let lastRun = null
  return function(){
    const self = this
    const now = new Date()
    if(now - lastRun > time){
      func.apply(self, arguments)
    }
    else {
      if(!timeout){
        timeout = setTimeout(func.apply(self, arguments), time)
      }
      else {
        clearTimeout(timeout)
        timeout = undefined
      }
    }
    lastRun = new Date()
  }
}

概要

スロットリングを実現する主な方法は、「現在」と「現在」を比較することです。 "lastRun" 時間差により、処理関数の呼び出し数が削減されます。アンチシェイクは引き続き settimeout を使用して処理関数の呼び出しタイミングを遅らせ、複数のトリガーの結果をまとめて処理関数を呼び出します。

以上がJavaScript でのデバウンスとスロットルの詳細な紹介 (コード例)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。