Prologue

これは、現在進行中のプロジェクトのアップグレード操作で実行されているスクロールイベント関数をより効果的に使用する場合に発見されるJavascript概念です.各スクロールがスクロールアクティビティを実行すると、Web/APPのパフォーマンスに大きな問題が発生する可能性があります.

1. Debouncing

検索ウィンドウでキーワードを検索すると、クリックや娯楽活動がなくても結果を直接検索できるサービスもあります.これらの結果を導くためには、inputイベントをいつでも待つ必要があります.コンソールで撮影すれば、その点がより明確に理解できます.
Javascriptは単一スレッド言語であるため、これらのメソッドを頻繁に呼び出すとブラウザのパフォーマンスに大きく影響します.パケットを解くのは、頻繁に発生する時間のかかるタスクを制御し、Webページのパフォーマンスの低下を防ぐプログラミング方法です.すなわち,関数呼び出しの速度を制限する.
特定の時間(interval)内にイベントが発生しない場合、論理が実行されます.

document.querySelector(#input).addEventListener('input', function(e) {
	console.log('리소스 낭비중', e.target.value)
}

接続されたinput elmentに値を入力すると、下図に示すようにクリックイベントが発生します.

アプリケーション

返品後

var timer;
document.querySelector('#input').addEventListener('input', function(e) {
  if (timer) {
    clearTimeout(timer);
  }
  timer = setTimeout(function() {
    console.log('여기에 ajax 요청', e.target.value);
  }, 200);
});

主に人々が検索する時、すぐに単語を完成します.したがって、アクティビティは、プレイヤーが0.5秒以内に入力しない場合にのみ実行される.すなわち、0.5秒以内にイベントが発生しない場合、最後のイベントロジックが実行される.
では、私たちのAngularのNGModelはどのようにリバウンドに対応しているのでしょうか.
AngularのngModelでは、ngModelOptionインジケータを使用してdebonseを設定できます.

<div class="form-group">
   <label>아이디</label>
   <!-- ng-model-options 는 옵션객체로 계산되는 표현식이 올 수 있다. -->
   <input type="text" class="form-control" name="inputId" ng-model="member.id" 
       ng-model-options="{debounce : 1000}">
</div>

2.Throttling

ユーザーがサービスを使用している間にスクロールイベントを使用すると、リアルタイムでスクロールするたびにイベントが発生します.ロールバックイベントが複雑なタスクの論理である場合、パフォーマンスの観点からはよくありません.これらの問題を解決するために,手書き体を用いた.
Throtlingは、ミリ秒または特定の時間間隔毎に最初のイベントのみを実行する関数を呼び出すために使用されます.これは演技の問題を解決する方法の一つです.
イベントリスナーが反応しても、少なくとも特定の時間に1回の論理を周期的に実行する.つまり、最初に発生したイベントと指定された時間内に発生したイベントは無視されます.

const throttle = () => {
  setTimeout(function() {
    scrollEvent();
  }, 200);
}

window.addEventListener('scroll',this.throttle, true);