目錄

一、函數(shù)防抖（debounce）

1. 什么是防抖？

二.、函數(shù)節(jié)流

2.1 定時(shí)器實(shí)現(xiàn)

2.2 時(shí)間戳實(shí)現(xiàn)

2.3 時(shí)間戳+定時(shí)器

最后 

---

一、函數(shù)防抖（debounce）

1. 什么是防抖？

函數(shù)防抖：在頻繁觸發(fā)某一個(gè)事件時(shí)，一段時(shí)間內(nèi)不再觸發(fā)該事件后才會(huì)去調(diào)用對(duì)應(yīng)的回調(diào)函數(shù)，在設(shè)定間隔時(shí)間內(nèi)如果下一次事件被觸發(fā)， 那么就重新開(kāi)始定時(shí)器，直到事件觸發(fā)結(jié)束。

規(guī)定時(shí)間內(nèi)沒(méi)有繼續(xù)觸發(fā)事件的前提下，再去調(diào)用事件處理函數(shù)；

具體如下面的例子所示：

    


        


            


            

        

        


            

                /*定義防抖函數(shù)
            

        

    

    


        


            


            

        

        


            

                 * func：傳入一個(gè)函數(shù)，事件不再持續(xù)觸發(fā)時(shí)會(huì)調(diào)用該函數(shù)
            

        

    

    


        


            


            

        

        


            

                 * delay:定義持續(xù)多久后執(zhí)行傳入的回調(diào)函數(shù)
            

        

    

    


        


            


            

        

        


            

                 * */
            

        

    

    


        


            


            

        

        


            

                function debounce(func,delay) {
            

        

    

    


        


            


            

        

        


            

                let timer = null // 用于保存定時(shí)器
            

        

    

    


        


            


            

        

        


            

                return function (...args) {
            

        

    

    


        


            


            

        

        


            

                // 如果定時(shí)器存在，清除定時(shí)器，隨后重新設(shè)置timer
            

        

    

    


        


            


            

        

        


            

                if(timer !== null) clearTimeout(timer)
            

        

    

    


        


            


            

        

        


            

                timer = setTimeout(func, delay) // 超過(guò)delay為接收到事件會(huì)調(diào)用這里的func   必要的額時(shí)候可以修改func的this指向  由于timer對(duì)外部存在引用，因此不會(huì)被銷毀
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                /*事件處理函數(shù)*/
            

        

    

    


        


            


            

        

        


            

                function testDeBounce(){
            

        

    

    


        


            


            

        

        


            

                console.log('你看我執(zhí)行了幾次？？')
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                // 接收debounce返回的函數(shù)
            

        

    

    


        


            


            

        

        


            

                const temp = debounce(testDeBounce(),1000)
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                /*綁定事件，測(cè)試防抖函數(shù)*/
            

        

    

    


        


            


            

        

        


            

                window.addEventListener('scroll',()=>{
            

        

    

    


        


            


            

        

        


            

                temp()
            

        

    

    


        


            


            

        

        


            

                }); // 這樣寫最少調(diào)用一次事件處理函數(shù)，最多也不會(huì)多余下面的寫法執(zhí)行的次數(shù)
            

        

    

    


        


            


            

        

        


            

                window.addEventListener('scroll', testDeBounce); // 如果這樣寫的話，每當(dāng)頁(yè)面滾動(dòng)就會(huì)調(diào)用事件處理函數(shù)
            

        

    

• 總結(jié)一下思路：

  1.定義一個(gè)節(jié)流函數(shù)

  2.函數(shù)內(nèi)部使用一個(gè)變量保存定時(shí)器

  3.返回一個(gè)函數(shù)，函數(shù)內(nèi)部定義：如果定時(shí)器已經(jīng)存在就清除定時(shí)器，重新設(shè)置定時(shí)器

  4.定義一個(gè)變量來(lái)接收debounce返回的函數(shù)

  5.在事件的回調(diào)函數(shù)中直接調(diào)用上一步的變量接收的方法

---

二.、函數(shù)節(jié)流

函數(shù)節(jié)流：在事件持續(xù)觸發(fā)的前提下，保證一定時(shí)間段內(nèi)只調(diào)用一次事件處理函數(shù)，就是函數(shù)節(jié)流；

函數(shù)節(jié)流實(shí)現(xiàn)的方式：定時(shí)器、時(shí)間戳、定時(shí)器+時(shí)間戳；

2.1 定時(shí)器實(shí)現(xiàn)

思路：

1.定義節(jié)流函數(shù)throttle

2.定義timer保存定時(shí)器

3.返回一個(gè)函數(shù)。函數(shù)內(nèi)部定義：如果定時(shí)器不存在，設(shè)置定時(shí)器，間隔某一時(shí)間后將timer設(shè)置為null，如果在這之前事件再次觸發(fā)，則定時(shí)器中的回調(diào)無(wú)效

<button>這是一個(gè)孤獨(dú)的按鈕</button> 

    


        


            


            

        

        


            

                /*
            

        

    

    


        


            


            

        

        


            

                 * 定義定時(shí)器節(jié)流函數(shù)
            

        

    

    


        


            


            

        

        


            

                 * func:傳入事件處理函數(shù)
            

        

    

    


        


            


            

        

        


            

                 * delay：在delay指定的時(shí)間內(nèi)定時(shí)器回調(diào)無(wú)效
            

        

    

    


        


            


            

        

        


            

                 * */
            

        

    

    


        


            


            

        

        


            

                function throttle(func,delay) {
            

        

    

    


        


            


            

        

        


            

                let timer = null
            

        

    

    


        


            


            

        

        


            

                const context = this
            

        

    

    


        


            


            

        

        


            

                return function(...args){
            

        

    

    


        


            


            

        

        


            

                // 如果定時(shí)器不存在
            

        

    

    


        


            


            

        

        


            

                if(!timer){
            

        

    

    


        


            


            

        

        


            

                timer = setTimeout(()=>{
            

        

    

    


        


            


            

        

        


            

                func.apply(context,args) // 考慮返回的函數(shù)調(diào)用的環(huán)境，因此這里不直接使用this
            

        

    

    


        


            


            

        

        


            

                timer = null // delay之后清除定時(shí)器
            

        

    

    


        


            


            

        

        


            

                },delay)
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                function test() {
            

        

    

    


        


            


            

        

        


            

                console.log('啊啊??！')
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                const temp = throttle(test,1000)
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                document.querySelector('button').addEventListener('click',()=>{
            

        

    

    


        


            


            

        

        


            

                temp()
            

        

    

    


        


            


            

        

        


            

                })
            

        

    

2.2 時(shí)間戳實(shí)現(xiàn)

    


        


            


            

        

        


            

                var throttle = function(func, delay) {
            

        

    

    


        


            


            

        

        


            

                var prev = Date.now();
            

        

    

    


        


            


            

        

        


            

                return function() {
            

        

    

    


        


            


            

        

        


            

                var context = this;
            

        

    

    


        


            


            

        

        


            

                var args = arguments;
            

        

    

    


        


            


            

        

        


            

                var now = Date.now();
            

        

    

    


        


            


            

        

        


            

                if (now - prev >= delay) {
            

        

    

    


        


            


            

        

        


            

                func.apply(context, args);
            

        

    

    


        


            


            

        

        


            

                prev = Date.now();
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                function handle() {
            

        

    

    


        


            


            

        

        


            

                console.log(Math.random());
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                window.addEventListener('scroll', throttle(handle, 1000));
            

        

    

2.3 時(shí)間戳+定時(shí)器

    


        


            


            

        

        


            

                // 節(jié)流throttle代碼（時(shí)間戳+定時(shí)器）：
            

        

    

    


        


            


            

        

        


            

                var throttle = function(func, delay) {
            

        

    

    


        


            


            

        

        


            

                var timer = null;
            

        

    

    


        


            


            

        

        


            

                var startTime = Date.now();
            

        

    

    


        


            


            

        

        


            

                return function() {
            

        

    

    


        


            


            

        

        


            

                var curTime = Date.now();
            

        

    

    


        


            


            

        

        


            

                var remaining = delay - (curTime - startTime);
            

        

    

    


        


            


            

        

        


            

                var context = this;
            

        

    

    


        


            


            

        

        


            

                var args = arguments;
            

        

    

    


        


            


            

        

        


            

                clearTimeout(timer);
            

        

    

    


        


            


            

        

        


            

                if (remaining <= 0) {
            

        

    

    


        


            


            

        

        


            

                func.apply(context, args);
            

        

    

    


        


            


            

        

        


            

                startTime = Date.now();
            

        

    

    


        


            


            

        

        


            

                } else {
            

        

    

    


        


            


            

        

        


            

                timer = setTimeout(func, remaining);
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                function handle() {
            

        

    

    


        


            


            

        

        


            

                console.log(Math.random());
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                window.addEventListener('scroll', throttle(handle, 1000));
            

        

    

最后 

想跟博主交朋友的可以查找，公_號(hào)?：前端老實(shí)人，跟博主一起探討學(xué)習(xí)哦?

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

轉(zhuǎn)自：csdn
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( www.wtxcl.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)