javascript高級 --- 函數防抖和函數節流

一、介紹
在某些特定場景下，函數可能會被頻繁的調用，回調中又會發生DOM操作，瀏覽器繼而重排與重繪，造成很嚴重的性能問題。

二、案例
例如：window.onresize / window.onscroll、頻繁的onmousemove onkeyup

解決類似問題：函數防抖(debounce)、函數節流(throttle)，核心就是限制一個函數的頻繁觸發

---

函數防抖：

顧名思義，利用函數實現防抖動，觸發函數時，元素的位置或者尺寸發生變化，導致頁面迴流，進而元素抖動，通過函數防抖，使得函數在一定時間內延遲執行一次，從而減少頁面迴流

通過定時器延遲執行當前函數

function debounce(fun, time = 800){
	clearTimeout(fun.timer)
	fun.timer = setTimeout(function = > {
		fun()
	},time)
}

debounce(scroll())

函數防抖基本實現，會發現當前的event對象爲undefined，強制綁定this，並且賦值參數

function debounce(fun, time = 800){
	clearTimeout(fun.timer)
	fun.timer = setTimeout(function = > {
		fun.apply(this,arguments)
	},time)
}

debounce(scroll())

函數節流：

限制函數執行的頻率，如果當前函數未執行完畢，未來的執行都會被忽略

function throttle(fun, time = 800) {
	if (fun.timer) return
	fun.timer = setTimeout(function = > {
		fun.apply(this,arguments)
		clearTimeout(fun.timer)
	},time)
}

debounce(scroll())