我们给一个inpu输入框绑定一个oninput事件，此时我们输入“前端开发”四个字，我们
观察以下后台打印
<!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.0">
<title>Document</title>
</head>
<body>
<input type="text" />
<script>
const inp = document.querySelector('input');
inp.oninput = function() { //我们给input输入框绑定了一个input事件
console.log(this.value);
}
</script>
</body>
</html>
我们仅仅输入四个字，就触发了几十次事件，
如果说我每一次输入都和后台进行数据交互，那么将会很影响计算机的性能。
因此我们需要让请求的次数大大减少，因此我们需要利用防抖来减少用户操作过多，与后台数据交互的次数。
接下来我们来介绍防抖
防抖：用户触发事件过于频繁，只要最后一次事件的操作。
也就是说，用户频繁的操作，我们只取最后一次操作。
比如
同样我们输入‘前端开发’四个字，如果我们输入的时间间隔小于0.5秒，就不触发oninput事件，
如果我们输入的时间间隔大于0.5秒，那么我们就触发oninput。
这样我们就大大减少了请求的次数。
<!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.0">
<title>Document</title>
</head>
<body>
<input type="text" />
<script>
const inp = document.querySelector('input');
let t = null;
inp.oninput = function() { //我们给input输入框绑定了一个input事件
if (t !== null) {
clearTimeout(t)
}
t = setTimeout(() => {
console.log(this.value)
}, 500)
}
</script>
</body>
</html>
如图，我们只要输入的时间间隔小于0.5秒，就不会触发oninput事件，只有当我们的输入的时间间隔超过0.5秒时，才会触发该事件。对比之下，我们触发的次数少了很多。
虽然以上代码完成了防抖的效果，但是还可以再优化一下，为什么要优化呢
在我们写的代码中只有console.log(this.value) 是真正的业务逻辑代码
而且我们还定义了一个全局变量t，
以及这部分是防抖代码和业务代码混在一起，
//防抖的逻辑和业务逻辑混在一起了
if (t !== null) {
clearTimeout(t)
}
t = setTimeout(() => {
console.log(this.value) //真正的业务逻辑代码
}, 500)，而且该部分代码可读性不太好，别人需要看半天才知道是防抖，因此我们需要优化一下。
我们可以通过闭包来优化防抖代码
使用闭包可以不用产生全局变量t，并且可以让防抖代码与业务代码隔离；
<!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.0">
<title>Document</title>
</head>
<body>
<input type="text" />
<script>
const inp = document.querySelector('input');
inp.oninput = debounce(function() {
console.log(this.value)
}, 500);
function debounce(fn, delay) {
let t = null;
return function() {
if (t !== null) {
clearTimeout(t)
}
t = setTimeout(() => {
fn();
}, delay)
}
}
</script>
</body>
</html>很多人看到这里可能一头雾水，突然有点看不懂了，别着急，我来慢慢解释。
这里我们定义了一个防抖函数debounce
inp.oninput = debounce();
function debounce() {//防抖函数
return function() {
}
}我们知道inp.oninput事件=一个函数，
所以debounce返回一个函数，并且我们需要将相关逻辑作为参数，传给debounce
inp.oninput = debounce(function(){},500);//参数function(){}中执行业务代码，500是传入的延时时间
function debounce(fn,delay) {//fn是要执行的业务逻辑，是函数//delay为定时器的延时事件
let t=null;
return function() {
if (t !== null) {
clearTimeout(t)
}
t = setTimeout(() => {
fn(); //执行的业务代码
}, delay)
}
}接着
inp.oninput = debounce(function() {
console.log(this.value)
}, 500);
function debounce(fn, delay) {
let t = null;
return function() {
if (t !== null) {
clearTimeout(t)
}
t = setTimeout(() => {
fn();
}, delay)
}
}我们运行一下代码，输入
发现输出的是undefind
我们打印一下this，发现打印的是window，
inp.oninput = debounce(function() {
console.log(this)//打印this
}, 500);
function debounce(fn, delay) {
let t = null;
return function() {
if (t !== null) {
clearTimeout(t)
}
t = setTimeout(() => {
fn();
}, delay)
}
} 
因此我们需要在改变this的指向，也就是改变参数fn的this的指向
inp.oninput = debounce(function() {
console.log(this)//打印this,指向window
}, 500);
function debounce(fn, delay) {
let t = null;
return function() {
if (t !== null) {
clearTimeout(t)
}
t = setTimeout(() => {
console.log(this)//指向input
fn();//fn的this指向window
}, delay)
}
}改变this指向后的代码
inp.oninput = debounce(function() {
console.log(this.value)
}, 500);
function debounce(fn, delay) {
let t = null;
return function() {
if (t !== null) {
clearTimeout(t)
}
t = setTimeout(() => {
fn.call(this);//通过call改变this指向
}, delay)
}
}
这样防抖代码优化完了。
完整代码如下：
<!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.0">
<title>Document</title>
</head>
<body>
<input type="text" />
<script>
const inp = document.querySelector('input');
inp.oninput = debounce(function() {
// console.log(this);
console.log(this.value)
}, 500);
function debounce(fn, delay) {
let t = null;
return function() {
if (t !== null) {
clearTimeout(t)
}
t = setTimeout(() => {
fn.call(this);
}, delay)
}
}
</script>
</body>
</html>什么是节流？
节流：控制高频事件的执行次数（事件频繁触发时，每隔多少秒触发一次）
防抖是只执行最后一次，而节流是减少执行次数。
我们先做一个滚动事件，只要我们让滚动条滚动就会打印123，如下图，我们只是滚动了一下，
就触发了一百多次，如果是和后台服务器产生数据交互，同样对性能消耗是比较大的。
因此我们需要节流。
<!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.0">
<title>Document</title>
<style>
body {
height: 2000px;
}
</style>
</head>
<body>
<script>
window.onscroll = function() {
console.log(123);
}
</script>
</body>
</html>
此时需要节流，来减少执行的次数
<!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.0">
<title>Document</title>
<style>
body {
height: 2000px;
}
</style>
</head>
<body>
<script>
let flag = true;
window.onscroll = function() {
if (flag) {
setTimeout(() => {
console.log('123');
flag = true;
}, 500)
}
flag = false;
}
</script>
</body>
</html>代码优化后
window.onscroll = throttle(function() {
console.log(123);
}, 500)
function throttle(fn, delay) {
let flag = true;
return function() {
if (flag) {
setTimeout(() => {
fn.call(this);
flag = true;
}, delay)
}
flag = false;
}
}