函数防抖与函数节流学习记录
# 函数防抖:
概念: 延迟要执行的动作,若在延时的这段时间内,再次触发了,则取消之前开启的动作,重新计时。比如电脑无操作1分钟后会进入休眠,当第40秒时鼠标被移动一下,重新计时1分钟。
实现方式: 定时器。通过在监听的内部对定时器进行清除
let input = document.getElementById('test');//键盘抬起获取输入框中的value值
let timer = null; //定时器的返回值,主要是为了清除定时器的传参
input.addEventListener('keyup',()=>{
let data = input.value;
clearTimeout(timer);//清除定时器
timer = setTimeout(()=>{
//异步请求
},500);
});
# 函数节流
概念:设定一个特定的时间,让函数在特定的时间内只执行一次,不会频繁执行。比如在键盘按下的时候会触发一个操作,但是你一直按着的话,就会一直触发操作,函数节流就是为了避免这种情况。
实现方式:定时器、标识 。通过标识的判断进行操作,操作完将标识置为false,通过定时器置回标识的状态。
例子:在鼠标滚轮滚动的时候,每隔2秒钟,打印一次
let body = document.getElementsByTagName('body')[0];
//每次滚轮后都会将状态置为false,不会进入打印,等两秒后再将状态置为true。
let flag = true;
body.onscroll = ()=>{
if(flag){
console.log(111);
flag = false;
setTimeout(function(){
flag = true;
},2000)
}
}