节流和防抖
节流和防抖都是用来控制某些函数的调用频率。如窗口的resize
,可视区变化的过程中,resize事件会被触发很多次,每次都去请求一次的话浪费性能,这时候就需要节流防抖来控制。
节流(throttle)
当事件触发后,在一段时间内不再触发,也就是多次触发以第一次为准
实现方式:
- 时间戳版
function throttle (func, delay){
var last = 0
return function () {
var now = Date.now()
if ( now > = delay + last ) {
func.apply(this, arguments)
last = now
} else {
cosnole.log('时间范围内')
}
}
}
- 定时器版
function throttle (func, delay){
var timer = null
return function () {
if (!timer) {
func.apply(this, arguments)
timer = setTimeout(() => {
timer = null
}, delay)
} else {
cosnole.log('时间范围内')
}
}
}
防抖(debounce)
与节流的不同之处在于,函数在一段时间之内多次触发,会以最后一次为准
实现方式:
function throttle (func, delay){
var timer = null
return function () {
clearTimeout(timer)
timer = setTimeout(() => {
func.apply(this, arguments)
}, delay)
}
}