JavaScript関数のスロットルとアンチシェイクの詳細な説明-jsチュートリアル-php.cn

JavaScript関数のスロットルとアンチシェイクの詳細な説明

小云云

リリース： 2017-12-21 09:12:59

オリジナル

2044 人が閲覧しました

この記事では主に JavaScript 関数のスロットルとアンチシェイクの原理と例を詳しく紹介しますので、興味がある方は参考にしてください。もっと皆さんのお役に立てれば幸いです。

手ぶれ防止とスロットル

サイズ変更、スクロール、入力ボックスの内容検証、およびウィンドウのその他の操作時、これらの操作処理関数がより複雑である場合、またはページが頻繁に再レンダリングされる場合、イベントの頻度が低い場合トリガーは無制限であるため、ブラウザーの負担が増大し、ユーザーエクスペリエンスが非常に低下します。このとき、デバウンス（手ぶれ防止）とスロットル（スロットル）を使用して、実際の効果に影響を与えることなくトリガーの頻度を減らすことができます。

これら 2 つは、プロジェクトの最適化のために使用されます。正式な定義はありません。これらは主に、短期間に継続的に実行される一部のイベントによって引き起こされるパフォーマンスの低下と大量のメモリ消費を解決するために使用されます。一般に、スクロールキーアップマウス移動サイズ変更などは、短時間に継続的にトリガーされ、特に DOM 構造を変更する一部の操作でパフォーマンスを消費します。

throttle [throttle]

スロットルは、一般的な規則によって説明されます。たとえば、次のような場合です。蛇口に水を入れると、バルブが開くと水が流れ落ちます。勤勉と倹約という伝統的な美徳に従って、できれば一定の時間内に一定のパターンに従って蛇口を閉めなければなりません。私たちの意図に合わせて、これが、これがスロットルの概念ですこれを関数に変更し、setTimeout メソッドを 2 回使用して、後の時間から前の時間を減算します。 us このイベントは、指定された時間に 1 回トリガーされます。ここでは、[scroll] を例として見てみましょう。 - ------------------------

/** 样式我就顺便写了 **/
<style>
 *{padding:0;margin:0;}
 .scroll-box{
  width : 100%;
  height : 500px;
  background:blue;
  overflow : auto;
 } 
 .scroll-item{
  height:1000px;
  width:100%;
 }
</style>

ログイン後にコピー

---------------------

/** 先给定DOM结构;**/
<p class="scroll-box">
 <p class="scroll-item"></p>
</p>

ログイン後にコピー

上記の関数を渡す、指定どおりに 300 ミリ秒ごとにトリガーするスロットリング効果を実現できます。もちろん、時間は必要に応じてカスタマイズできます。

アンチシェイク [デバウンス]

コードを記述する前に、まず説明します。手ぶれ補正の概念について、コンピュータの両側に広告ウィンドウをフローティングするようなことをしたことがありますか。スクロールバーをドラッグすると、両側の広告ウィンドウがドラッグし続けます。スクロールバーを中央に移動すると、揺れる 2 つのウィンドウが表示されます

一般に、これはジッターと呼ばれます。私たちがしなければならないことは、デバウンスと呼ばれるこの種のジッターを防ぐことです。ここでの手ぶれ補正の考え方は、ドラッグが完了した後、両側のウィンドウの位置が再計算され、見た目がスムーズで快適になるということです。 DOM 構造に対する操作が大幅に削減されます。;

ページのパフォーマンスが最適化され、メモリ消費が削減されます。そうしないと、IE などの古いブラウザを使用している場合、クラッシュする可能性があります。

文章で表現すると、特定のイベントが終了する前に、関数は実行されません。遅延時間を与え、指定された遅延時間の後に関数を実行します。これが手ぶれ補正関数です。コードを見てください。

/**主要看js,为了简单我用JQ去写了**/
<script>
 $(document).ready(function(){
  var scrollBox = $(&#39;.scroll-box&#39;);
  //调用throttle函数，传入相应的方法和规定的时间;
  var thro = throttle(throFun,300);
  //触发事件;
  scrollBox.on(&#39;scroll&#39; , function(){
   //调用执行函数;
   thro();
  })

  // 封装函数; 
  function throttle(method,time){
   var timer = null;
   var startTime = new Date();
   return function(){
    var context = this;
    var endTime = new Date();
    var resTime = endTime - startTime;
    //判断大于等于我们给的时间采取执行函数;
    if(resTime >= time){
     method.call(context);
     //执行完函数之后重置初始时间，等于最后一次触发的时间
     startTime = endTime;
    }
   }
  }
  function throFun(){
   console.log(&#39;success&#39;);
  }
 })
</script>

ログイン後にコピー

このアイデアは、関数が実行される前に、まずタイマーをクリアします。関数が実行を続ける場合、関数は操作が完了するまで実行されません。 ;

実際、書き方は次のとおりです。主にアイデアの問題のため、たくさんあります。

使い方

背景など。リクエストの検証。手ぶれ補正機能を使用できます。そうしないと、キーボードを 1 回押すたびにフリーズしてしまいます。リクエストの頻度が高すぎるため、キーボードを押し終えて再度リクエストすると、リクエストは大幅に減少します。パフォーマンスは言うまでもありませんが、

ウィンドウのサイズを調整するときは、手ぶれ補正テクノロジーを使用するか、ストリームのスロットルを使用できます。マウス移動イベントでは、手ぶれ補正またはスロットリングを使用できます。 ;

スクロールバーによってトリガーされるスクロールイベント、もちろん、手ぶれ補正またはスロットリングを使用できます。