防抖:把多次觸發(fā)頻繁的事件合并成一次去執(zhí)行细疚。就是最后一次事件觸發(fā)后的指定時(shí)間內(nèi)只執(zhí)行一次回調(diào)函數(shù),如果在指定的時(shí)間內(nèi)又觸發(fā)了該事件川梅,則回調(diào)函數(shù)的執(zhí)行時(shí)間會(huì)基于此刻重新開始計(jì)算疯兼。舉個(gè)通俗的例子:公交車到站了,乘客上車刷卡(頻繁觸發(fā)事件)挑势,等所有乘客刷完卡站穩(wěn)扶好((最后一次事件觸發(fā)后指定時(shí)間))之后镇防,開車(回調(diào)函數(shù))。
節(jié)流: 規(guī)定在一個(gè)單位時(shí)間內(nèi)多次觸發(fā)函數(shù)啦扬,只能有一次觸發(fā)生效函數(shù)扑毡。頻繁觸發(fā)事件時(shí)勋又,每隔指定時(shí)間會(huì)執(zhí)行回調(diào)楔壤。再舉個(gè)例子:水龍頭嘩啦嘩啦流水(頻繁觸發(fā)事件),擰緊水龍頭到一定程度隙畜,每隔一段時(shí)間就會(huì)有水滴流出(回調(diào))
用于實(shí)時(shí)搜索,實(shí)時(shí)查詢等減小服務(wù)壓力换淆。
防抖--“非立即執(zhí)行”防抖
export?function?debounce1(fn,?wait?=?500)?{
??let?timer,?that,?args;
??const?later?=?()?=>?{
????fn.apply(that,?args);
??}
??return?function?()?{
????that?=?this;?//?保存this指向
????args?=?arguments;
????if?(timer)?{
??????clearTimeout(timer);
????}
????timer?=?setTimeout(later,?wait);?
??}
}
防抖--“立即執(zhí)行”?防抖
export?function?debounce2(fn,?wait?=?500)?{
??let?timer,?that,?args;
??const?later?=?()?=>?{
????timer?=?null;
??}
??return?function?()?{
????that?=?this;?//?保存this指向
????args?=?arguments;
????const?callNow?=?!timer;
????timer?=?setTimeout(later,?wait);?
????callNow?&&?fn.apply(that,?args);
??}
}
--------------------------------------------------------------------------------------------------------------------------------------------------------
節(jié)流?--?時(shí)間戳
export?function?throttle1?(fn,?wait)?{
??var?_start?=?0;
??return?function?(...args)?{
????var?_now?=?+new?Date(),?
??????context?=?this,?
??????last?=?_now?-?_start;
??????if?(last?<?wait)?return;
??????_start?=?now;
??????fn.apply(context,?args)
??}
}
//?方式1:時(shí)間戳方式可以通過設(shè)置?var?_start?=?0?來(lái)保證第一次觸發(fā)立即執(zhí)行回調(diào)县习,不會(huì)延遲躁愿,同時(shí)如果最后一次觸發(fā)回調(diào)與前一次觸發(fā)回調(diào)時(shí)間差小于delayTime,則最后一次觸發(fā)事件不會(huì)執(zhí)行fn;
節(jié)流?--?定時(shí)器
export?function?throttle2?(fn,?wait)?{
??var?timeout;
??return?function?()?{
????var?context?=?this,?
??????args?=?arguments;
??????if?(!timeout){
????????timeout?=?setTimeout(()?=>?{
??????????fn.apply(context,?args);
??????????timeout?=?null;
????????},?wait)
??????}
??}
}
//方式2:?定時(shí)器方式第一次觸發(fā)才會(huì)開始計(jì)時(shí)梆砸,如果最后一次觸發(fā)回調(diào)事件與前一次時(shí)間間隔小于delayTime,delayTime之后仍會(huì)執(zhí)行fn赂弓。