Q4：函数的防抖动和节流
防抖
将几次操作合并为一次操作进行。原理是维护一个计时器，规定时间t内触发函数，但是在时间t内再次触发的时候，就会取消之前的计时器而重新设置。这样一来，只有最后一次操作能被触发。
1
2
3
4
5
6
7
8
9
10
11
| function debounce(fn, t) {
let delay = null
return function() {
let _this = this
let args = arguments
clearTimeout(delay)
delay = setTimeout(function() {
fn.apply(_this, args)
}, t)
}
}
|
节流
一定时间范围内只触发一次函数。和防抖动最大的区别就是，节流函数不管事件触发有多频繁，都会保证在规定时间内一定会执行一次真正的事件处理函数。而防抖动只是在最后一次时间后才触发一次函数。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| function throttle(fn, t) {
let delay = null
let startTime = Date.parse(new Date)
return function() {
let _this = this
let args = arguments
let curTime = Date.parse(new Date)
let time = t - (curTime - startTime)
clearTimeout(delay)
if (time <= 0) {
fn.apply(_this, args)
startTime = Date.parse(new Date)
} else {
delay = setTimeout(fn, time)
}
}
}
|