テキスト版とマインドマップ版に分かれています（記事の最後にあります）
1.手ぶれ補正
1. 意味
イベントが n 秒後にトリガーされるとコールバックが実行され、n 秒以内に再度トリガーされると、タイミングが再開されます。
2. 利用シーン
- 検索入力ボックスの関連付け機能は、入力がなくなってから数百ミリ秒後にリクエストを送信するため、サーバーへの負荷が軽減されます。
- サイズ変更のためにブラウザ ウィンドウのサイズを常に変更すると、ブラウザの再配置が発生し、パフォーマンスが消費されます。
3. 機能実装
function debounce(func, delay) {
let timer;
return function () {
let context = this;
let args = arguments;
if (timer) {
clearTimeout(timer);
}
timer = setTimeout(function () {
func.apply(context, args);
// 其实就是 context.func(args)
}, delay);
};
}
2、スロットリング
1. 意味
この関数は単位時間内に 1 回のみトリガーできると規定されており、単位時間内に複数回トリガーされた場合でも、実行されるのは 1 回だけです。
2. 利用シーン
- 自動的にさらに読み込むために一番下にスライドするかどうかなど、スクロール イベントをリッスンし、スロットルを使用して判断します
- マウスを継続的にクリックしてトリガー、マウスダウン (単位時間あたり 1 回のみトリガー)
3. 機能実装
(1) タイムスタンプ
function throttle(fn, wait) {
var args;
// 前一次执行的时间戳
var previous = 0;
return function() {
// 将时间转为时间戳
var now = +new Date();
args = arguments;
// 时间间隔大于延迟时间才执行
if (now - previous > wait) {
fn.apply(this, args);
previous = now;
}
};
}
(2) タイマー
function throttle(fn, wait) {
var timer, context, args;
return function() {
context = this;
args = arguments;
// 如果定时器存在，则不执行
if (!timer) {
timer = setTimeout(function() {
// 执行后释放定时器变量
timer = null;
fn.apply(context, args);
}, wait);
}
};
}
4. 展開する
関数の実装: イベントがトリガーの実行を停止するまで待つ必要はありません。関数をすぐに実行し、トリガーが停止するまで n 秒待ってから実行を再トリガーしたいと考えています。
function debounce(func, wait, immediate) {
var timeout, result;
return function () {
var context = this;
var args = arguments;
if (timeout) {
clearTimeout(timeout);
}
if (immediate) {
// 如果已经执行过，不再执行
var callNow = !timeout;
timeout = setTimeout(function(){
timeout = null;
}, wait)
if (callNow) {
result = func.apply(context, args)
}
}
else {
timeout = setTimeout(function(){
func.apply(context, args)
}, wait);
}
return result;
}
}
3. 比較
1.同じ
- 本質的な目的は、プログラムのパフォーマンスを節約することです (高頻度の関数呼び出しを防ぐため)。
- どちらもクロージャの特性を使用して変数 (状態) をキャッシュします。
- どちらも setTimeout を使用して実現できます
2. 違う
焦点は異なります。アンチシェイクは安定性を重視し、一度しか実行できません。一方、スロットリングはサイクル内の回数、つまり実行頻度を制限することに重点を置き、すべての時間の合計回数を制限しません。
4.ロダッシュ
lodash 中国語ドキュメント
https://www.lodashjs.com/docs/lodash.debounce
https://www.lodashjs.com/docs/lodash.throttle
マインドマッピング
参考記事リンク
https://juejin.cn/post/6893748375372431368#Heading-1
https://juejin.cn/post/6844903752063778830#Heading-2
https://juejin.cn/post/6844903795420299278