函数防抖和节流

一、函数防抖

函数防抖：事件在n秒后再执行，也就是延迟执行，若n秒内再次触发事件，则重新开始计时。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
/**
 * v1 - 首次触发防抖
 */

function debounce (fn, delay) {
  var t = null
  
  return function () {
    var _self = this,
      args = arguments

    if (t) {
      clearTimeout(t)
    }

    t = setTimeout(() => {
      fn.apply(_self, args)
    }, delay)
  }
}

首次触发不防抖，n秒之内触发防抖。应用于频繁AJAX请求。

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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
/**
 * v2 - 首次可以不防抖
 * 可手动移除防抖
 * 可返回函数执行的结果
 * 主要应用于频繁ajax请求
 */

function debounce (fn, delay, triggerNow = false) {
  var t = null, 
    res = null

  var _debounce = function () {
    var _self = this,
      args = arguments

    if (t) {
      clearTimeout(t)
    }

    // 立即触发
    if (triggerNow) {
      // 第一次t=null,exec=true
      var exec = !t
      
      // t = idNumber
      // delay seconds 之后, t = null
      // delay seconds 之内频繁触发, exec = false
      t = setTimeout(() => {
        t = null
      }, delay)
      
      // 首次执行
      if (exec) {
        res = fn.apply(_self, args)
      }
    } else {
      t = setTimeout(() => {
        res = fn.apply(_self, args)
      }, delay)
    }
    return res
  }

  // 手动移除防抖
  _debounce.remove = function () {
    clearTimeout(t)
    t = null
    res = null
  }

  return _debounce
}

二、函数节流

函数节流：事件在n秒之内只执行一次。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
/**
 * v1 - 锁机制
 */

function throttle (fn, delay){
  var lock = false
  
  return function(){
    var _self = this,
        args = arguments
    
    if(lock) {
      return
    }
    
    fn.apply(_self,args)
    lock = true
    setTimeout(()=>{
      lock = false
    }, 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
25
26
27
/**
 * v2 - 计时
 */

function throttle (fn, delay) {
  var t = null,
    begin = new Date().getTime()

  return function () {
    var _self = this,
      args = arguments,
      cur = new Date().getTime()

    if (t) {
      clearTimeout(t)
    }

    if (cur - begin >= delay) {
      fn.apply(_self, args)
      begin = cur
    } else {
      t = setTimeout(() => {
        fn.apply(_self, args)
      }, delay)
    }
  }
}