什么是防抖和節(jié)流:??
比如搜索框纹份，用戶在輸入的時(shí)候使用change事件去調(diào)用搜索运挫，如果用戶每一次輸入都去搜索的話吕漂，那得消耗多大的服務(wù)器資源亲配，即使你的服務(wù)器資源很強(qiáng)大，也不帶這么玩的惶凝。
區(qū)別
函數(shù)節(jié)流不管事件觸發(fā)有多頻繁吼虎，都會(huì)保證在規(guī)定時(shí)間內(nèi)一定會(huì)執(zhí)行一次真正的事件處理函數(shù)，而函數(shù)防抖只是在最后一次事件后才觸發(fā)一次函數(shù)苍鲜。函數(shù)防抖將幾次操作合并為一此操作進(jìn)行思灰。原理是維護(hù)一個(gè)計(jì)時(shí)器，規(guī)定在delay時(shí)間后觸發(fā)函數(shù)混滔，但是在delay時(shí)間內(nèi)再次觸發(fā)的話洒疚，就會(huì)取消之前的計(jì)時(shí)器而重新設(shè)置。這樣一來(lái)坯屿，只有最后一次操作能被觸發(fā)油湖。函數(shù)節(jié)流使得一定時(shí)間內(nèi)只觸發(fā)一次函數(shù)。原理是通過判斷是否到達(dá)一定時(shí)間來(lái)觸發(fā)函數(shù)领跛。
函數(shù)防抖
定義: 函數(shù)防抖就是在一段時(shí)間觸發(fā)或調(diào)用函數(shù)時(shí),只執(zhí)行一次; 也可以理解為觸發(fā)n毫秒之后才會(huì)調(diào)用一次
優(yōu)點(diǎn): 優(yōu)化系統(tǒng)性能
例如每次用戶停止輸入后乏德，延遲超過500ms時(shí)，才去搜索此時(shí)的String吠昭，這就是防抖喊括。
如果用手指一直按住一個(gè)彈簧胧瓜，它將不會(huì)彈起直到你松手為止。
也就是說當(dāng)調(diào)用動(dòng)作n毫秒后瘾晃，才會(huì)執(zhí)行該動(dòng)作贷痪，若在這n毫秒內(nèi)又調(diào)用此動(dòng)作則將重新計(jì)算執(zhí)行時(shí)間幻妓。
原理：將若干個(gè)函數(shù)調(diào)用合成為一次蹦误，并在給定時(shí)間過去之后僅被調(diào)用一次。
應(yīng)用場(chǎng)景：實(shí)時(shí)搜索（keyup）肉津、拖拽（mousemove）
封裝防抖函數(shù)
完整demo
還有一種方法只不過獲取不到this 直接上代碼 不發(fā)截圖了
function?debounce(fn,wait){
????????var?timer?=?null;
????????return?function(){
????????????if(timer?!==?null){
????????????????clearTimeout(timer);
????????????}
????????????timer?=?setTimeout(fn,wait);
????????}
????}
????function?handle(){
????????console.log('你好');
????}
????input.oninput=debounce(handle,?1000)
函數(shù)節(jié)流
函數(shù)節(jié)流就是預(yù)定一個(gè)函數(shù)只有在大于等于執(zhí)行周期時(shí)才執(zhí)行强胰，周期內(nèi)調(diào)用不執(zhí)行。好像水滴攢到一定重量才會(huì)落下妹沙。
指連續(xù)觸發(fā)事件但是在 n 秒中只執(zhí)行一次函數(shù)偶洋。節(jié)流會(huì)稀釋函數(shù)的執(zhí)行頻率。
應(yīng)用場(chǎng)景：窗口調(diào)整(resize)距糖、頁(yè)面滾動(dòng)(scroll)玄窝、搶購(gòu)瘋狂點(diǎn)擊(mousedowm)
時(shí)間戳版本
定時(shí)器版本
區(qū)別：
時(shí)間戳版的函數(shù)觸發(fā)是在時(shí)間段內(nèi)開始的時(shí)候，而定時(shí)器版的函數(shù)觸發(fā)是在時(shí)間段內(nèi)結(jié)束的時(shí)候悍引。
