画像安定化の機能は何ですか？
コールバックは、イベントn秒でトリガされ、これはn秒でトリガされた場合、その後、それは実行時間遅延機能を再計算します。
たとえば：エレベーターが検出されたときに、人々は（トリガイベント）に来た場合、より多くの誰かが（10秒以内に繰り返しトリガイベント）で来る場合は、その後、10秒待っがあるでしょうエレベーターを取る、そしてエレベーターはより多くの10秒を待ちます。
なぜ私たちは、手ブレ補正機能が必要なのか
-
さらにonResize、スクロール、mouseMoveイベント、MouseHoverなど、短い時間内にトリガ数回は、制限は、あなたが、実装の特定には、これらの関数の内部で他の機能を実行する場合、1秒以内に何十回も行って何百回もすることができない場合DOM操作機能（ブラウザのDOMは非常に時間の動作性能を消費している）、それだけではなく、コンピュータリソースの無駄ですが、また、走行速度を下げる、あるいはブラウザが立ち往生原因、クラッシュします。
-
繰り返し短時間Ajaxの呼び出しだけでなく、混乱のデータ関係原因、また、ネットワークの輻輳原因、サーバー上の圧力を高めることができます。
実際の戦闘シナリオでありました
連続イベント、単にコールバックシナリオをトリガ：
- 適応時間のPCをやって、動的に達成するために、サイズのレムを変え、さらにonResizeイベントを書き換えることで、あなたは、このようなユーザーのページを調整してから、この機能をトリガーとして、手ぶれ補正機能を使用することができます。ウィンドウの調整が完了した直後に、ウィンドウサイズを計算します。防止重複レンダリング。
- 虫眼鏡機能を達成するため、このAPIをMOUSEMOVE達成するためのズーム機能を使用します。
- 検索入力ボックスを検索します。ただ、その後、要求を送信し、最後のユーザ入力を終え
アイデアの画像安定化の実現
我々は必要なのsetTimeoutを実行するコードの遅延動作を達成するのを支援します。
メソッドが繰り返しトリガされた場合は、と記録されたコードの最後の遅延実行入れてclearTimeoutは、再起動のタイミングにクリア。
時限式イベント中に再度トリガ、およびその遅延時間が満了していない場合は、オブジェクトコードが実行されます。
手ぶれ補正機能のコード
そして、質量参加問題や手ぶれ補正関数fnコールバック関数の呼び出しを容易にするために、我々はこれらの問題を解決するためにクロージャを使用する必要があります。
function debounce(fn,wait){
var timer = null;
return function(){
var _this = this;
var args = arguments; // 取debounce执行作用域的this
if(timer !== null){
clearTimeout(timer);
}
timer = setTimeout(function(){
fn.apply(_this,agrs);// 用apply指向调用debounce的对象，相当于_this.fn(args);
},wait);
}
}
function handle(){
console.log(Math.random());
}
window.addEventListener("onresize",debounce(handle,1000));
スロットルの機能は何ですか？
時々、一度だけの機能
例えば：電車や地下鉄、一定の時間をかけて、セキュリティ（例えば、10秒）は、完全なセキュリティスクリーニングにセキュリティ担当者を満たすために、セキュリティを通じて一つだけの乗客の入り口を可能にします。
なぜスロットル機能？
そして、その理由は、同じ手ブレ補正機能であります
戦闘シーンスロットル機能
- 圧延荷重、より多くの負荷やロールモニター下部
- 高周波クリックすると、繰り返しに提出フォームを送信します
アイデアのスロットル機能実現
主なアイデアはを通じて実現されるのsetTimeoutのタイマー、またはセットスタンプを実践することにより、
- タイムスタンプは：時間と実行時間間隔の間の実行時間差より時間に対するこの大きさによって、機能を実行するか否かを判定する。違いは、時間間隔よりも大きい場合には、すぐに機能を実行します。そして、最後の実行時間を更新します。
- タイマー：もう一つ注意すべきは次のとおりです。FNの実装が完了した後の空のタイマーの遅延が、この時間タイマーが偽で、スロットルトリガーは、タイマーを入力することができます
機能を絞るためのコード
- タイムスタンプ
function throttle(fn,wait){
var pre = Date.now();
// 使用闭包返回一个函数并且用到闭包函数外面的变量pre
return function(){
var _this = this;
var args = arguments;
var now = Date.now();
if(now-pre >= wait){
fn.apply(_this,args);
pre = now;
}
}
}
function handle(){
console.log(Math.random());
}
window.addEventListener("mousemove",throttle(handle,1000));
- タイマー
function throttle(fn,wait){
var timer;
return function(){
var _this = this;
var args = arguments;
//这时候如果timer存在，不给执行
if(timer){
return;
}
if(!timer){
timer = setTimeout(funciton(){
fn.apply(_this,args);
timer = null; // 在delay后执行完fn之后清空timer，此时timer为假，throttle触发可以进入计时器
}，wait)
}
}
}
function handle(){
console.log(Math.random());
}
window.addEventListener("mousemove",throttle(handle,1000));
手ぶれ補正機能との間にスロットル関数Aの比較
-
同じポイント：
- setTimeoutメソッドによって達成することができます
- 目的は、コールバックの頻度を減らすことです。
-
違い：
- スロットル機能に着目すると、時間の期間に一度だけ行われている間入射懸念機能画像安定化は、一度だけ、最後の実行に一列に一定の時間をトリガー。
