定時器:
在javascript高級程序設(shè)計(jì)里面有講到杆查,重復(fù)的定時器(setInterval)會有一些問題:(Javascript高級程序設(shè)計(jì)第三版:611頁)
1.某些定時器會被跳過
2.定時器之間的間隔會比預(yù)期的時間要短
原因在于定義定時器所在的主函數(shù)運(yùn)行時間過長扰法,所以在選用定時器的時候烹笔,盡量不要選用setInterval,可以使用setTimeout連續(xù)設(shè)置,或者也可以每次都清除當(dāng)前setInterval的定時器坎怪,重新設(shè)定新的定時器(有點(diǎn)繞)澳窑。
函數(shù)防抖:(Javascript高級程序設(shè)計(jì)里也有描述,不過書中概念是節(jié)流)
防抖的原理:你盡管觸發(fā)事件佳魔,但是我一定在事件觸發(fā) n 秒后才執(zhí)行,如果你在一個事件觸發(fā)的 n 秒內(nèi)又觸發(fā)了這個事件晦炊,那我就以新的事件的時間為準(zhǔn)鞠鲜,n 秒后才執(zhí)行,總之断国,就是要等你觸發(fā)完事件 n 秒內(nèi)不再觸發(fā)事件贤姆,我才執(zhí)行,真是任性吶!(JavaScript專題之跟著underscore學(xué)防抖)
總結(jié)成一句話就是:
n s內(nèi)最后一次觸發(fā)這個事件的用戶操作才使有效的稳衬。
適合多次事件最后一次響應(yīng)的情況
應(yīng)用場景:
給按鈕加函數(shù)防抖防止表單多次提交霞捡。
對于輸入框連續(xù)輸入進(jìn)行AJAX驗(yàn)證時,用函數(shù)防抖能有效減少請求次數(shù)薄疚。
判斷scroll是否滑到底部碧信,滾動事件+函數(shù)防抖
window的resize事件避免頻繁被加載
函數(shù)節(jié)流
函數(shù)節(jié)流的原理:類似水管的水流調(diào)控赊琳,在一定時間內(nèi)只會流一定的水,一段時間內(nèi)某個操作只會觸發(fā)一次
適合多次事件被頻繁觸發(fā)時按指定的間隔響應(yīng)的情況
應(yīng)用場景:
搜索聯(lián)想
鼠標(biāo)位置的計(jì)算
滾動條避免用戶過快移動
函數(shù)節(jié)流和防抖對比
throttle 節(jié)流
搜索聯(lián)想
判斷是否滾動到了底部(每隔一段時間判斷一次)
debounce 防抖
搜索驗(yàn)證
判斷是否滾動到了底部(只有用戶不再滾動了才判斷是否滾動到了底部)