節流と手ぶれ防止とその応用シーン…
1128 ワード
関数の手ぶれ防止(debounce):イベントがトリガされたn秒後に、再度コールバックを実行します.このn秒以内にトリガされたら、再カウントします. searchは連想を検索して、ユーザーは絶えず値を入力する時、手ぶれを防ぎますで資源を要求します. windowがresizeをトリガした時、ブラウザのウィンドウサイズを調整し続けると、このイベントは継続的にトリガされます.
関数の手ぶれ防止(debounce):単位時間でトリガします.一回だけ実行します.
function debounce(fn，delay) {
let timer;
const that = this;
return function (){
const _args = arguments;
if (timer ){ clearTimeout(timer)}
timer= setTimeout(function(){
fn.apply(that,_args)
},delay)
}
}関数の手ぶれ防止(debounce):単位時間でトリガします.一回だけ実行します.
function throttle(fn,delay){
let deferTimer , last;
return function (args){
const context = this;
const now = new Date();
const _args = arguments;
if(last&&now{
fn.apply(context,_args);
last=now;
clearTimeout(deferTimer)
},last+delay-now);
}
} else {
fn.apply(context,_args);
last=now;
}
}
}