目錄

一、函式防抖（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));

最后

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

如果對您有幫助，希望能給個👍評論收藏三連！

博主為人老實，無償解答問題哦?