防抖or節(jié)流

//?1、防抖?:規(guī)定一個期限時(shí)間,在首次觸發(fā)事件時(shí),不利己執(zhí)行回調(diào)函數(shù),而是在期限時(shí)間后在執(zhí)行,如果期限時(shí)間內(nèi)回調(diào)函數(shù)被重發(fā)調(diào)用,則期限時(shí)間重新計(jì)算,并且上一次回調(diào)函數(shù)不在執(zhí)行

????????//?例如:搜索框頻繁輸入搜索

????????function?search(fn,?num)?{

????????????var?timeId?=?null

????????????return?function?()?{

????????????????if?(timeId)?{

????????????????????clearTimeout(timeId)

????????????????}

????????????????timeId?=?setTimeout(fn,?num);

????????????}

????????}

????????function?fn()?{

????????????console.log("一秒后停止輸入了");

????????}

????????document.getElementById("text_id").addEventListener("input",?search(fn,?1000))


????????//?2、節(jié)流?:?規(guī)定一個期限時(shí)間,在該時(shí)間內(nèi),觸發(fā)事件的回調(diào)函數(shù)只執(zhí)行一次,如果期限時(shí)間內(nèi)的回調(diào)函數(shù)被對此觸發(fā),則只有一次能生效

????????//????實(shí)際上節(jié)流就是讓函數(shù)執(zhí)行后,在某個時(shí)間段內(nèi)暫時(shí)失效,過了這個時(shí)間段后在重新激活

? ? ? ? ?// 類似于游戲CD冷卻

????????function?Throttling?(fn1,num1){

????????????var?timeId?=?null

????????????var?old_time

????????????return?function?(){

????????????????var?new_time?=?new?Date().getTime()

????????????????if(old_time&&new_time?<?num1+old_time){

????????????????????clearTimeout(timeId)

????????????????????timeId?=?setTimeout(function(){

????????????????????????fn1()

????????????????????????old_time?=?new_time

????????????????????},num1)

????????????????}else{

????????????????????fn1()

????????????????????old_time?=?new_time

????????????????}

????????????}

????????}

????????function?fn1(){

????????????var?position?=?document.body.scrollTop||document.documentElement.scrollTop

????????????console.log('當(dāng)前位置:',position);

????????}

????????window.onscroll=?Throttling(fn1,3000)


防抖
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

友情鏈接更多精彩內(nèi)容