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

你可能感兴趣的:(Javascript)