# debounce

  • 两次触发事件间隔控制在 delay
/**
 *
 * @param fn {Function}   实际要执行的函数
 * @param delay {Number}  延迟时间,也就是阈值,单位是毫秒(ms)
 *
 * @return {Function}     返回一个函数
 */
function debounce(fn, delay) {
  // 定时器,用来 setTimeout
  var timer
  // 返回一个函数,这个函数会在一个时间区间结束后的 delay 毫秒时执行 fn 函数
  return function() {
    // 保存函数调用时的上下文和参数,传递给 fn
    var context = this
    var args = arguments
    // 每次这个返回的函数被调用,就清除定时器,以保证不执行 fn
    clearTimeout(timer)
    // 当返回的函数被最后一次调用后(也就是用户停止了某个连续的操作),
    // 再过 delay 毫秒就执行 fn
    timer = setTimeout(function() {
      fn.apply(context, args)
    }, delay)
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

# throttle

  • 指定时间内只触发一次
/**
 *
 * @param fn {Function}   实际要执行的函数
 * @param delay {Number}  执行间隔,单位是毫秒(ms)
 *
 * @return {Function}     返回一个“节流”函数
 */
function throttle(fn, threshold) {
  // 记录上次执行的时间
  var last = null
  // 定时器 
  var timer = null
  // 默认间隔为 1000ms
  threshold || (threshold = 1000)
  // 返回的函数,每过 threshold 毫秒就执行一次 fn 函数
  return function() {
    // 保存函数调用时的上下文和参数,传递给 fn
    var context = this
    var args = arguments
    var now = +new Date()
    // 如果距离上次执行 fn 函数的时间小于 threshold,那么就放弃
    // 执行 fn,并重新计时
    if (last && now < last + threshold) {
      clearTimeout(timer)
      // 保证在当前时间区间结束后,再执行一次 fn
      timer = setTimeout(function() {
        last = now
        fn.apply(context, args)
      }, threshold)
      // 在时间区间的最开始和到达指定间隔的时候执行一次 fn
    } else {
      last = now
      fn.apply(context, args)
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
Last Updated: 7/15/2020, 2:33:30 PM