ファンクション・スロットリングのアプリケーション・シナリオと頻度は、ファンクション・スタビライゼーションに比べると少し大きいです。
機能安定化については、こちらをご覧ください：
主なトピック
スロットリングとは何ですか？
幼稚園児は毎日3つのことをしなければなりません：食べて、寝て、遊ぶビーニー。
ただ一人だけ例外があって、その子の名前はドウドウ。
すると、親切で勇敢な子供が前に出てきて言いました：
これ以上殴り続けると、彼を殺してしまいますよ。
そうなれば、食べることと寝ることだけになります！
今後72時間ごとに1回だけビーニーを打つことができます。
だからみんな納得して、感動の涙を流しました
一般的に、ウェブページがスクロールダウンする距離が長くなると
右下にトップに戻るボタンが表示されます。
実装は非常に簡単です。
window.onscroll = functiion(){
if(ページのスクロール距離> 800) ボタンを表示する
else ボタンを隠す
}
しかし、すぐにこのプログラムのロジックに問題があることに気づきます。
つまり、スクロールイベントは非常に頻繁にトリガーされます。
ページを少しスクロールすると
十数回、あるいは二十数回、連続してイベントが発生します。
その都度、ページのスクロール距離の再計算や判断、ボタンの表示などを行う必要があります。
明らかに、イベントは必要な頻度でトリガーされる必要はありません。
一度に200msで十分なようです。
では、コードに移ります。
ファンクション・スロットリング
var lasttime = 0;
window.onscroll = function(){
var now = new Date().getTime(); //イベントがトリガされるたびに現在の時刻を取得する
if( now-lasttime > 200 ){ //時間間隔が200ミリ秒以上である場合
lasttime = now; //コードを実行し、リタイムする
//
}
}
上記のコードを読んでもまだスロットリングの原理が理解できない場合
別の回路図をお見せしましょう。
要約：
スロットリングを使えば、一定期間、最初の実行だけが有効になるようにすることができます。設定された時間を超えるまで、次回の演奏の機会はありません。
その名の通り。
var lasttime = 0;
window.onscroll = function(){
var now = new Date().getTime(); //イベントがトリガされるたびに現在の時刻を取得する
if( now-lasttime > 200 ){ //時間間隔が200ミリ秒以上である場合
lasttime = now; //コードを実行し、リタイムする
//
}
}
window.onscroll = (function(){
var lasttime = 0;
return function(){
var now = new Date().getTime(); //イベントがトリガされるたびに現在時刻を取得する
if( now-lasttime > 200 ){ //時間間隔が200ミリ秒以上である場合
lasttime = now; //コードを実行し、リタイムする
//
}
}
})()
- DOM要素のドラッグ＆ドロップ
- シューティングゲームでは、単位時間に1つの弾丸しか発射できません。
- キャンバスアナログ製図ボード機能
- スクロール中にイメージを読み込む必要があるかどうかを判断するレイジーローディング
- もっと読み込むには、ページの一番下までスクロールしてください。
上記、間違いや異なる見解があれば、議論するためにメッセージを残すことを歓迎します...
