💁🏼♀ 什么是防抖？
--高频率触发的事件,在指定的单位时间内，只响应最后一次，如果在指定的时间内再次触发，则重新计算时间
防抖类似于英雄联盟回城6秒，如果回城中被打断，再次回城需要再等6秒
具体流程实现如下：
具体代码实现如下：
<body>
<input type="text" id="inp">
<script>
let inp = document.getElementById('inp');
//封装一个防抖函数
function debounce(fn,time){
//利用闭包实现记录timeout，用来记录清除的定时器编号
let timeout = null;
return function(){
// 如果不是最后一次就清除定时器
if(timeout!=null){
//清除setTime定时器
clearTimeout(timeout);
}
//timeout会接收到等待过程的值，当执行了fn()后timeou就会失效
timeout = setTimeout(()=>{
fn.call(this);//this指向改变为调用函数的this
//将timout设为空，当执行完定时器后就不用再清除定时器了
timeout = null;
},time)
}
}
function getvalue(){
//输出输入框的值
console.log(this.value);
}
inp.addEventListener('input',debounce(getvalue,2000));
</script>
</body>
💁🏼♀ 什么是节流？
--高频率触发的事件,在指定的单位时间内，只响应第一次
节流类似于英雄联盟里的英雄平A 一定是内点击多次只进行攻击一次
具体流程实现如下：
具体代码实现如下：
function throttle(fn,time){
//闭包记录第一次是成功的
let flag = false
return function(){
//标记为真时return
if(flag) return;
else{
//再次点击后就return不会再进入计时器内
flag = true;
setTimeout(()=>{
fn.call(this);
// 直至计时器执行结束，方可再次触发事件
flag = false;
},time);
}
}
}
function getvalue(){
console.log("click the btn...");
}
var btn = document.getElementById('btn');
btn.addEventListener('click',throttle(getvalue,2000));
