通俗易懂的防抖和节流
通俗易懂的防抖和节流
- 防抖 原理:延时器
-
- 防抖是什么
- 防抖实现代码
- 节流 原理:时间戳
-
- 节流是什么
- 节流实现代码
防抖 原理:延时器
防抖是什么
通俗讲:就是防止抖动
案例:搜索框输入文字后 会去发请求 将搜索的结果展示到下面供你参考
一般的oninput事件监听后 每输入一个字就会去发请求
例如:搜索内容'防抖和节流' 你可能不是一次性输入'防抖和节流'
而是 输入'防抖' 之后 在输入 '和' '节流'或'和节流'
那么他就会发送2次 或是3次的请求 这样会请求增多 加重服务器任务量
所以我么要进行防抖
怎么防止请求过多呢?
总思路:输入完后 我等你两秒 看看你是否还输入 如果2s后还输入那么我就不发请求等你输完 否则 我就发请求
思路: 输入后 我进行创建一个延时器 2秒
延时器内容就是2秒后要发的请求
2秒过后 你还在输入 那么我就清除前面的延时器 在创建一个新的延时器 在重新等你2秒
2秒过后 你还不在输入 那么我就执行延时器的函数[发请求]
防抖实现代码
<!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>防抖</title>
</head>
<body>
搜索框:<input type="text" id="search">
<script>
//获得元素
var search=document.querySelector("#search");
//创建防抖 函数
function fangdou(fn,time){
//参数 fn 要执行的请求 函数
//time 等待的时间 2s
var timer=null;
//创建timer 来接受将来的延时器
return function(){
//如果 你还在输入 我要清楚以前的延时器新建一个新的
clearTimeout(timer)
timer=setTimeout(function(){
// fn();
fn.call(this);
//等待time 后要执行的请求函数
},time)
//等待time 后要执行的请求函数
}
}
search.oninput=fangdou(function(){
console.log("输入后等待2秒 我猜出来");
},2000);
</script>
</body>
</html>
注意
fn(); 此时fn的this 指向window
fn.call(this);此时fn的this 指向元素input
节流 原理:时间戳
节流是什么
节流更简单理解:
例如鼠标移动事件 onmousemove 是不是激活的次数非常的多 一但打印那控时台瞬间满屏
所以:我们要限制他的激活次数 利用时间差
抑制激活的事件 按照水一滴一滴的下落的方式 节流
利用时间差 不管你怎么一直触发 我只按照每1秒执行一次
就像水滴一样 每一秒滴下一滴水
节流实现代码
<!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>节流</title>
</head>
<body>
<script>
//创建节流处理 函数
function jieliu(fn,time){
//参数 fn 移动事件激活后要做的事
//time 每time 秒后执行一次
var timer=Date.now();
//创建timer 来接受此时的开始时间
return function(){
if(Date.now()-timer>time){
//如过 过了一秒后 [Date.now() 此时的结束时间]-[timer 开始时间]>1秒 说明时间过了一秒
fn();
//执行函数
timer=Date.now();
//执行完后 将timer的开始时间定为上一次的结束时间
}
}
}
document.onmousemove=jieliu(function(){
console.log("不用急 我我每1秒执行一次");
},1000);
</script>
</body>
</html>
“个人感悟”
学习代码的时候 都是菜鸟 可能你觉得好难 那是因为咱们的基础知识太差了
可能高中学的那些 和代码几乎毫不相干, 但是高中能让你有较强自控力,学习力,提升的是内在素质,相信学习那么多年终将收获点东西,只是还未发觉,可能某天就是突然顿悟了,那是因为你的阅历增多了,思维的层次,维度上升了,
代码也是这样,一定要学会基础,没事可以百度,什么菜鸟,blibli 都能学习,主要是很多人不愿意学习,可能学了又不会,还要忘记,就放放弃了,
但我要说,你学的一切都是为了你自己打基础,冲攒能量,当某一天能量够了,
你就会不自觉的感到自己提升了,当你和别人谈论时你会发现你的维度上升了,看到他们就像看到当初的自己