# 防抖与节流

# 防抖

  • 在一段时间内函数事件只会执行一次,如果在这段时间内事件被再次触发,则从头开始计算触发时间
  • 每次触发事件时都清除之前的延时
  • 一次点击多次,只执行最后一次
function debounce(fn, deplay = 2000) {
    let time = null
    return function () {
        clearTimeout(time)
        time = setTimeout(() => {
            fn.call(this, arguments)
        }, deplay)
    }
}
1
2
3
4
5
6
7
8
9

# 节流

  • 事件多次执行触发,但是在一段时间只会执行一次,节流会稀释函数的执行频率
  • 每次触发事件时都判断当前是否有等待执行的延时函数
  • 一次点击多次,只执行第一次点击
function throttle(fn, deplay = 5000) {
    let predeplay = 0
    return function() {
        let now = +new Date()
        if (now - predeplay > deplay) {
            fn.apply(this, arguments)
            predeplay = now
        }
    }
}
1
2
3
4
5
6
7
8
9
10
更新于: 2/17/2020, 1:20:14 AM