# 防抖的实现

# 前言

在前端开发中，经常会遇到一些频繁的事件触发，比如:

  1、window的resize、scroll
  2、mousedown、mousemove
  3、keyup、keydown
  ....

1
2
3
4

为此，我们举个实例代码来了解事件是如何频繁触发的：我们写一个index.html 文件：

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
  <meta charset="utf-8">
  <meta http-equiv="x-ua-compatible" content="IE=edge, chrome=1">
  <title>debounce</title>
  <style>
    #container {
      width: 100%; 
      height: 200px; 
      line-height: 200px; 
      text-align: center; 
      color: #fff; 
      background-color: #444; 
      font-size: 30px;
    }
  </style>
</head>

<body>
  <div id="container"></div>
  <script src="debounce.js"></script>
</body>

</html>

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

debounce.js 文件的代码如下:

var count = 1
var container = document.getElementById('container')
function getUserAction() {
  container.innerHTML = count++;
};
container.onmousemove = getUserAction;

1
2
3
4
5
6

未做防抖处理

从左边滑到右边就触发了 165 次 getUserAction 函数！

因为这个例子很简单，所以浏览器完全可以反应过来，可是如果是复杂的回调函数或者是ajax请求呢？假设1秒钟触发了60次，每个回调必须在 1000 / 60 = 16.67ms 内完成，否则就会有卡顿出现。

为了解决这个问题，一般有两种解决方案：

1、debounce 防抖
2、throttle 节流

# 防抖

TIP

防抖的原理就是: 你尽管触发事件，但是我一定在事件触发n秒之后才执行，如果你在一个事件触发的n秒内又触发了这个事件，那我就以新的事件的时间为准，n秒后才执行，总之，就是哟等到你触发事件n秒内不再触发事件，我才执行。

# 第一版

根据描述，我们可以写第一版代码:

// 第一版
function debounce(func, wait) {
  var timeout;
  return function () {
    clearTimeout(timeout)
    timeout = setTimeout(func, wait);
  }
}

1
2
3
4
5
6
7
8

如果我们要使用它，以最一开始的例子为例:

container.onmousemove = debounce(getUserAction, 1000);

现在无论怎么移动，反正你移动完 1000ms 内不再触发，我才执行事件，看看效果: 防抖第一版

顿时从165次降低到了1次！

# this

如果我们在 getUserAction 函数中 console.log(this)，在不使用 debounce 函数的时候，this 的值为：

<div id="container"></div>