目錄

一、函數防抖（debounce）

1. 什么是防抖？

二.、函數節流

2.1 定時器實現

2.2 時間戳實現

2.3 時間戳+定時器

最后 

---

一、函數防抖（debounce）

1. 什么是防抖？

函數防抖：在頻繁觸發某一個事件時，一段時間內不再觸發該事件后才會去調用對應的回調函數，在設定間隔時間內如果下一次事件被觸發， 那么就重新開始定時器，直到事件觸發結束。

規定時間內沒有繼續觸發事件的前提下，再去調用事件處理函數；

具體如下面的例子所示：

    


        


            


            

        

        


            

                /*定義防抖函數
            

        

    

    


        


            


            

        

        


            

                 * func：傳入一個函數，事件不再持續觸發時會調用該函數
            

        

    

    


        


            


            

        

        


            

                 * delay:定義持續多久后執行傳入的回調函數
            

        

    

    


        


            


            

        

        


            

                 * */
            

        

    

    


        


            


            

        

        


            

                function debounce(func,delay) {
            

        

    

    


        


            


            

        

        


            

                let timer = null // 用于保存定時器
            

        

    

    


        


            


            

        

        


            

                return function (...args) {
            

        

    

    


        


            


            

        

        


            

                // 如果定時器存在，清除定時器，隨后重新設置timer
            

        

    

    


        


            


            

        

        


            

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

        

    

    


        


            


            

        

        


            

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

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                /*事件處理函數*/
            

        

    

    


        


            


            

        

        


            

                function testDeBounce(){
            

        

    

    


        


            


            

        

        


            

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

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                // 接收debounce返回的函數
            

        

    

    


        


            


            

        

        


            

                const temp = debounce(testDeBounce(),1000)
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                /*綁定事件，測試防抖函數*/
            

        

    

    


        


            


            

        

        


            

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

        

    

    


        


            


            

        

        


            

                temp()
            

        

    

    


        


            


            

        

        


            

                }); // 這樣寫最少調用一次事件處理函數，最多也不會多余下面的寫法執行的次數
            

        

    

    


        


            


            

        

        


            

                window.addEventListener('scroll', testDeBounce); // 如果這樣寫的話，每當頁面滾動就會調用事件處理函數
            

        

    

• 總結一下思路：

  1.定義一個節流函數

  2.函數內部使用一個變量保存定時器

  3.返回一個函數，函數內部定義：如果定時器已經存在就清除定時器，重新設置定時器

  4.定義一個變量來接收debounce返回的函數

  5.在事件的回調函數中直接調用上一步的變量接收的方法

---

二.、函數節流

函數節流：在事件持續觸發的前提下，保證一定時間段內只調用一次事件處理函數，就是函數節流；

函數節流實現的方式：定時器、時間戳、定時器+時間戳；

2.1 定時器實現

思路：

1.定義節流函數throttle

2.定義timer保存定時器

3.返回一個函數。函數內部定義：如果定時器不存在，設置定時器，間隔某一時間后將timer設置為null，如果在這之前事件再次觸發，則定時器中的回調無效

<button>這是一個孤獨的按鈕</button> 

    


        


            


            

        

        


            

                /*
            

        

    

    


        


            


            

        

        


            

                 * 定義定時器節流函數
            

        

    

    


        


            


            

        

        


            

                 * func:傳入事件處理函數
            

        

    

    


        


            


            

        

        


            

                 * delay：在delay指定的時間內定時器回調無效
            

        

    

    


        


            


            

        

        


            

                 * */
            

        

    

    


        


            


            

        

        


            

                function throttle(func,delay) {
            

        

    

    


        


            


            

        

        


            

                let timer = null
            

        

    

    


        


            


            

        

        


            

                const context = this
            

        

    

    


        


            


            

        

        


            

                return function(...args){
            

        

    

    


        


            


            

        

        


            

                // 如果定時器不存在
            

        

    

    


        


            


            

        

        


            

                if(!timer){
            

        

    

    


        


            


            

        

        


            

                timer = setTimeout(()=>{
            

        

    

    


        


            


            

        

        


            

                func.apply(context,args) // 考慮返回的函數調用的環境，因此這里不直接使用this
            

        

    

    


        


            


            

        

        


            

                timer = null // delay之后清除定時器
            

        

    

    


        


            


            

        

        


            

                },delay)
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                function test() {
            

        

    

    


        


            


            

        

        


            

                console.log('啊啊啊！')
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                const temp = throttle(test,1000)
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

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

        

    

    


        


            


            

        

        


            

                temp()
            

        

    

    


        


            


            

        

        


            

                })
            

        

    

2.2 時間戳實現

    


        


            


            

        

        


            

                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 時間戳+定時器

    


        


            


            

        

        


            

                // 節流throttle代碼（時間戳+定時器）：
            

        

    

    


        


            


            

        

        


            

                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));
            

        

    

最后 

想跟博主交朋友的可以查找，公_號?：前端老實人，跟博主一起探討學習哦?

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

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

轉自：csdn
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.lzhte.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務