アンチシェイク-この機能は、高周波イベントがトリガーされてからn秒後に1 回だけ実行されます。高周波イベントがn秒以内に再度トリガーされると、時間が再計算されます。
アイデア: イベントがトリガーされるたびに、前の遅延呼び出しメソッドをキャンセルします。
関数デバウンス( fn ) {
タイムアウト= null にする
// タイマーの戻り値を格納するマーカーを作成します
戻り関数() {
clearTimeout(タイムアウト)
// ユーザーが入力するたびに、前の setTimeout をクリアします
タイムアウト= setTimeout(() => {
// 次に、文字を入力してからの時間を保証できるように setTimeout を新規作成します
インターバル期間内にまだ文字入力が残っている場合、fn 関数は実行されません。
fn 。apply ( this , argument )
}、500 ）
}
}
関数sayHi () {
console.log ( '手ぶれ補正が成功しました ' )
}
var inp =ドキュメント。getElementById ( 'inp' )inp. addEventListener ( 'input' , debounce(sayHi))
スロットル-高頻度のイベントがトリガーされますが、n秒に1 回しか実行されないため、スロットリングにより関数の実行頻度が低くなります。
アイデア: イベントがトリガーされるたびに、実行を待機している遅延関数があるかどうかが判断されます。
関数スロットル( fn ) {
let canRun = true // クロージャを通じてトークンを保存します
戻り関数() {
if ( ! canRun ) return
// 関数の先頭でフラグがtrueかどうかを判定し、trueでない場合はreturn
canRun = false // すぐに false に設定されます
setTimeout(() => {
// 外部から渡された関数の実行をsetTimeoutに入れる
fn 。apply ( this , argument )
// 最後に、setTimeout の実行が完了したら、フラグを true (キー) に設定して、次のループを実行できることを示します。タイマーが実行されていない場合、フラグは常に false であり、最初に返されます。
canRun = true
}、500 ）
}
}
関数SayHi ( e ) {
コンソール。log ( e . target . innerWidth 、e . target . innerHeight )
}
窓。addEventListener ( 'resize' , throttle(sayHi))