1.函数节流和函数防抖的异同
1.1 相同点
都是为了解决函数调用过于频繁的一种设计
1.2 不同点
函数节流: 指在一定的时间段内只能执行一次。举个例子,事件为发射子弹,假设一把手枪只能装一颗子弹,当射击一颗子弹之后,就必须花费一定的时间重新装填子弹,等装填完成之后,才能射击。
函数防抖:在一定的空闲时间内才会执行,举个例子,事件为过马路,过马路的时候,需要等车过去一定的时间后才能过马路,但在这一段时间内又来了一辆车,这时就会重新计算这一段时间,当这一段时间内没有车辆经过的时候,才能成功过马路。
2.代码实现
2.1 函数节流
function throttle(fn) {
return function(time) {
return (function(){
let flag = true
let _this = this
return function(...params) {
if (!flag) return
flag = false
setTimeout(() => {
flag = true
fn.apply(_this, params)
}, time)
}
})()
}
}
function test() { console.log('test') }
test = throttle(test)(1000)
2.2 函数防抖
function deshake(fn) {
return function(time) {
return (function() {
let outId = ''
return function(...params) {
let _this = this
clearTimeout(outId)
outId = setTimeout(() => {
fn.apply(_this, params)
}, time)
}
})()
}
}
function test() { console.log('test') }
test = throttle(test)(1000)