Fork me on GitHub

js中实现防抖与节流

防抖

1
2
3
4
5
6
7
8
9
10
11
12
13
14
export function debounce(fn, delay) {
let timer = null
return function(...args) {
clearTimeout(timer)
timer = setTimeout(() => {
fn.call(this, ...args)
}, delay)
}
}

// 使用方式
const search = debounce(function() {
// ...
}, 300)

节流

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
export function throttle(fn, delay, cb) {
let time = null
return function(...args) {
const curTime = new Date()
if (time && curTime - time < delay) {
return typeof cb === 'function' && cb.call(this)
}
time = curTime
fn.call(this, ...args)
}
}

// 使用方式
const query = throttle(
function() {
// ...
},
1000,
function() {
console.log('请求次数过于频繁')
}
)

注意不要使用箭头函数,不然会导致 this 错乱,因为 call 也无法改变箭头函数 this 指向