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);}//第一个参数是个函数为了拿到用户输入的值，第一个参数时计时器需要等待多少秒进行， 也就是我们放完技能后几秒的cdinputvalue = 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=thisreturn 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>
