1.js防抖
防抖主要是用在输入框用输入输入触发一些请求，搜索一些数据，为了减少请求次数优化性能而采取的措施。
解决的问题：高频的事件操作带来了函数的多次调用影响性能。
原理：在一定的时间间隔N秒后才执行该事件，如果在N秒内又触发了该事件则重新计时。（就是你玩游戏技能有CD时间）
应用场景:
（1）输入框连续输入值后，直等到最后一次输入完才进行相关的事件操作
（2）点赞、表单提交、防止重复提交。
下面是用原生js实现一个input输入框防抖的事件，代码如下：
<!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" id="ipt">
</body>
<script>
//首先我们需要获取到input的输入的值
function inputvalue(event) {
let value = event.target.value;
//获取到用户输入的值进行发送请求操作或者做其他事件操作
request(value);
}
//第一个参数是个函数为了拿到用户输入的值，第一个参数时计时器需要等待多少秒进行， 也就是我们放完技能后几秒的cd
inputvalue = debounce(inputvalue, 1000)
//发送请求或者其他操作的事件
function request(data) {
//这个地方传递的参数就是input的输入值
console.log('发送请求', data)
}
//现在开始进行防抖函数，只有用户输入完了在进行操作
function debounce(fn, await) {
//第一个参数是函数，第二个参数时等待的时间
//有些人喜欢在这里进行this的切换,我感觉写不写都行
//console.log(this);//这里的this指向wwindow
//声明一个变量用来存放定时器，先让定时器为空进入下面的操作
let timeout = null;
//let _that=this
return function (...args) {
//console.log(this);//这里的this指向当前调用者对象也就是 input
//console.log(...args);//所有的打印都是为了看清到底是谁被当做参数传递进来了
//这个地方用课解构es6的新特性，因为不知道会传递几个参数
//因为第一次定时器为空所以不会进入，当第二次触发也就是用户在此输入的时候就不为空了
//就会进入判断然后再让定时器为空，直到用户最后一次输入清除以后timeout就有值了就会执行定时器里面的操作了
if (timeout) {
//console.log(timeout);//就是用户输入的值，
// console.log(this);//这里的this指向当前调用者对象也就是 input
//如果timeout有值就清除定时器让定时器从新计时
clearTimeout(timeout);
}else{
//这个else可有可无，看自己是否需要用户第一次输入的值去做一些操作
//这个地方是使用apply改变一下this指向后面的参数就是我们传递的函数
// fn.apply(this, args)
}
timeout = setTimeout(() => {
fn.apply(this, args)
}, await)
}
}
//给input绑定上监听时间，防抖函数就完成了
document.getElementById('ipt').oninput = inputvalue;
</script>
</html>