為啥要使用防抖和節(jié)流
在觸發(fā)mousemove梁钾、scroll等事件時(shí)武学,會(huì)不斷的調(diào)用綁定在事件上面的回調(diào)函數(shù)祭往,極大的限制了前端性能;因此我們要防止資源被過渡浪費(fèi)和惡意點(diǎn)擊火窒,我們需要對(duì)此類事件進(jìn)行減少調(diào)用次數(shù)硼补,因此會(huì)用防抖和節(jié)流的方式來減少頻率。
防抖的定義:在固定時(shí)間內(nèi)熏矿,事件只允許被發(fā)生一次
簡單的防抖函數(shù)
當(dāng)input框輸入時(shí)已骇,結(jié)果會(huì)實(shí)時(shí)查詢,也就是當(dāng)用戶每輸入一個(gè)字符票编,函數(shù)就會(huì)被調(diào)用一次褪储,如果當(dāng)用戶手速過快時(shí)或惡意輸入時(shí),會(huì)有n個(gè)請(qǐng)求慧域,此時(shí)數(shù)據(jù)就會(huì)發(fā)生抖動(dòng)鲤竹。
若我們將在一定的事件內(nèi),把input框輸入事件合并成為一個(gè)昔榴,執(zhí)行的請(qǐng)求會(huì)根據(jù)設(shè)定的時(shí)間而發(fā)出一次請(qǐng)求辛藻,即將這段時(shí)間的所有操作只執(zhí)行一次。
節(jié)流的定義:把一定時(shí)間內(nèi)的多個(gè)事件合為一個(gè)執(zhí)行
簡單的節(jié)流函數(shù)
當(dāng)鼠標(biāo)在盒子內(nèi)移動(dòng)時(shí)互订,會(huì)不停的執(zhí)行回調(diào)函數(shù)吱肌,就會(huì)輸出發(fā)送請(qǐng)求,所以我們需要處理讓鼠標(biāo)移動(dòng)時(shí)數(shù)據(jù)不要立刻發(fā)送請(qǐng)求
同樣仰禽,我們需要一個(gè)函數(shù)在連續(xù)操作中按照一定時(shí)間間隔只會(huì)執(zhí)行一次回調(diào)函數(shù)氮墨,在頻率較高的事件中來節(jié)省性能