成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

JS實現(xiàn)函數(shù)的節(jié)流和防抖

melody_lql / 996人閱讀

摘要：函數(shù)的節(jié)流當(dāng)持續(xù)觸發(fā)事件時，保證一定時間段內(nèi)只調(diào)用一次事件處理函數(shù)。也就是一個函數(shù)執(zhí)行一次后，只有大于設(shè)定的執(zhí)行周期后才會執(zhí)行第二次。記憶法讓函數(shù)執(zhí)行者冷靜下來后不一直抖動后，才真正執(zhí)行。

1.函數(shù)的節(jié)流 
當(dāng)持續(xù)觸發(fā)事件時，保證一定時間段內(nèi)只調(diào)用一次事件處理函數(shù)。也就是一個函數(shù)執(zhí)行一次后，只有大于設(shè)定的執(zhí)行周期后才會執(zhí)行第二次。
記憶法：聯(lián)系到水流的流量，我想讓你1s只流出多少水你就只能流多少水，多的水流只能等到下個周期才能流出。
應(yīng)用場景：如用戶不斷滑動滾輪，規(guī)定1s只能真正下滑一次，你滑再多也沒用，只能等到下個周期你再滑才有用。

實現(xiàn)原理：
A：用函數(shù)的閉包來鎖住上一執(zhí)行的時間，在用這一次執(zhí)行的時間相比，大于設(shè)定的間隔時間則執(zhí)行
B：也可以直接把lasTime放到全局去，不用閉包但這樣就不好在事件監(jiān)聽的時候傳遞參數(shù)delay只能寫死

這里我節(jié)流用閉包寫，防抖就不用閉包了

用閉包就有一個問題，this的指向會非常復(fù)雜：
1.throttle函數(shù)的執(zhí)行環(huán)境具有全局性，內(nèi)部this通常是指向window的，然后返回一個匿名函數(shù)。
2.返回的匿名函數(shù)綁定了事件，this指向監(jiān)聽的元素（document）
3.fn其實與上面返回匿名函數(shù)形成了閉包，且fn也其實是一個匿名函數(shù)，匿名函數(shù)的執(zhí)行具有全局性，fn內(nèi)部this應(yīng)該指向window
4這里用apply修正this指向，使fn內(nèi)部的this重新指向document

2.函數(shù)防抖 
當(dāng)持續(xù)觸發(fā)事件時，一定時間段內(nèi)沒有再觸發(fā)事件，事件處理函數(shù)才會執(zhí)行一次，如果設(shè)定的時間到來之前，又一次觸發(fā)了事件，就重新開始延時，比如頻繁觸發(fā)的某一函數(shù)，防抖可以只讓最后一次執(zhí)行。記憶法:讓函數(shù)執(zhí)行者冷靜下來后（不一直抖動后），才真正執(zhí)行。
應(yīng)用場景：用戶多次點擊提交表單

不用閉包后結(jié)構(gòu)會很簡單

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/53780.html

相關(guān)文章

  • JS之節(jié)流和防抖

    摘要：節(jié)流在指定時間之內(nèi)，讓函數(shù)只觸發(fā)一次。防抖對于一定時間段的連續(xù)的函數(shù)調(diào)用，只讓其執(zhí)行一次。總結(jié)以上只是很簡單的寫了一下節(jié)流和防抖的原理，在里，實現(xiàn)起來更加復(fù)雜，但是背后的原理核心就是上邊代碼寫的。 概述 在平時的開發(fā)中，經(jīng)常會聽到兩個差不多很相近的詞。節(jié)流（throttle）和防抖（debounce）。這是兩個類似又有些不同的優(yōu)化方案。 節(jié)流：在指定時間之內(nèi)，讓函數(shù)只觸發(fā)一次。 防...

    fevin 評論0 收藏0

  • 前端優(yōu)化 —— 函數(shù)的節(jié)流和防抖

    摘要：文件為函數(shù)要傳入的參數(shù)返回事件處理函數(shù)添加事件監(jiān)聽節(jié)流函數(shù)一般用于事件的情況較多，因為這些事件的觸發(fā)是連續(xù)性的，需要在一個時間間隔內(nèi)只觸發(fā)一次。 showImg(https://segmentfault.com/img/remote/1460000018998747); 閱讀原文 前言 在前端開發(fā)當(dāng)中我們經(jīng)常會綁定一些事件觸發(fā)的某些程序執(zhí)行，有時這些事件會連續(xù)觸發(fā)，如瀏覽器窗口 s...

    ralap 評論0 收藏0

  • JS實現(xiàn)函數(shù)的節(jié)流和防抖

    摘要：函數(shù)的節(jié)流當(dāng)持續(xù)觸發(fā)事件時，保證一定時間段內(nèi)只調(diào)用一次事件處理函數(shù)。也就是一個函數(shù)執(zhí)行一次后，只有大于設(shè)定的執(zhí)行周期后才會執(zhí)行第二次。記憶法讓函數(shù)執(zhí)行者冷靜下來后不一直抖動后，才真正執(zhí)行。 1.函數(shù)的節(jié)流 當(dāng)持續(xù)觸發(fā)事件時，保證一定時間段內(nèi)只調(diào)用一次事件處理函數(shù)。也就是一個函數(shù)執(zhí)行一次后，只有大于設(shè)定的執(zhí)行周期后才會執(zhí)行第二次。記憶法：聯(lián)系到水流的流量，我想讓你1s只流出多少水你就只能...

    cnsworder 評論0 收藏0

  • JS實現(xiàn)函數(shù)的節(jié)流和防抖

    摘要：函數(shù)的節(jié)流當(dāng)持續(xù)觸發(fā)事件時，保證一定時間段內(nèi)只調(diào)用一次事件處理函數(shù)。也就是一個函數(shù)執(zhí)行一次后，只有大于設(shè)定的執(zhí)行周期后才會執(zhí)行第二次。記憶法讓函數(shù)執(zhí)行者冷靜下來后不一直抖動后，才真正執(zhí)行。 1.函數(shù)的節(jié)流 當(dāng)持續(xù)觸發(fā)事件時，保證一定時間段內(nèi)只調(diào)用一次事件處理函數(shù)。也就是一個函數(shù)執(zhí)行一次后，只有大于設(shè)定的執(zhí)行周期后才會執(zhí)行第二次。記憶法：聯(lián)系到水流的流量，我想讓你1s只流出多少水你就只能...

    浠ラ箍 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<