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