1、防抖
① 用户触发操作过于频繁，我们只需要最后一次事件操作即可。例如，当我们在输入框中填写数据时，只要值变化，它就会向后台发出请求。只要你不停地输入，它就会不停地发出请求，数据就会发生抖动，容易挤爆内存。所以我们要在一定时间内的请求合并成一个，防止数据抖动，优化性能。
② 解决方法：添加定时器，在最后一次触发事件n秒后发出请求。如果你一直输入数据，它就会清除前一个数据来代替前一个数据，当你停下来不再输入数据时，获取最后一个数据，n秒之后才发出一次请求。
2、节流
- ① 用户触发事件过于频繁，控制每隔多少秒发生一次。例如，表单提交，用户一直点击提交是不可取的，要在n秒内只能提交一次。
- ② 解决方案：添加定时器，每隔n秒发出一次请求。
3、两者区别
| 防抖与节流 | |
| 防抖 | 只需要最后一次事件操作即可（输入数据） |
| 节流 | 控制每隔多少秒发生一次事件操作（登陆按钮） |
3、防抖函数解析
4、节流函数解析
5、源代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>防抖与节流</title> <!-- Bootstrap --> <link rel="stylesheet" href="bootstrap/bootstrap.min.css"> </head> <style> body { padding: 0px; margin: 0px; } main { position: absolute; width: 500px; /*小矩形处于以左上角为原点的中心位置 */ top: 50%; left: 50%; /*让小矩形往左上移动自身长宽的50%*/ transform: translate(-50%, -50%); } form .form-group { margin-bottom: 10px; } </style> <body> <main class="shadow p-3 mb-5 bg-white rounded"> <form> <div class="form-group"> <label for="username">Username</label> <input type="text" class="form-control" id="username"> </div> <div class="form-group"> <label for="password">Password</label> <input type="password" class="form-control" id="password"> </div> <button class="btn btn-primary" type="button">Submit</button> </form> </main> <!-- Bootstrap --> <script src="bootstrap/jquery.min.js"></script> <script src="bootstrap/bootstrap.min.js"></script> </body> <script> // 1、防抖：用户触发事件过于频繁，只需要最后一次事件的操作 let dataInput = document.querySelector('input'); dataInput.oninput = antiShake(function () { console.log(this.value); }, 2000); // 2、封装防抖 function antiShake(fn, wait) { let timeOut = null; return function () { if (timeOut) clearTimeout(timeOut); // 用call把this指针指向input timeOut = setTimeout(() => { fn.call(this); }, wait); } } // 3、节流：用户触发事件过于频繁，控制每隔多少秒发生一次；例如，表单提交 let submit = document.querySelector('button'); let click = true; submit.onclick = throttle(function () { console.log('hello world'); click = true; }, 2000); // 4、封装节流 function throttle(fn, wait) { return function () { if (click) { setTimeout(() => { fn(); }, wait) } click = false; } } </script> </html>
