前言
一直以来都有使用防抖和节流函数，但是奈何两个概念太过相似，因此一直理解不清楚，今天专门花时间写了个例子，来感受一波防抖和节流到底有什么区别。
- 防抖：一个事件发生一定时间之后才会执行特定的动作
- 一段时间内执行多次，只有最后 一次生效。举个栗子：123会每移入一次就会执行一次，但是只有等到执行的动作超过2秒之后才会打印234，234里面的代码就是防抖要执行的代码。一直触发间隔小于2秒不会执行。
一个更形象的例子：提交表单的时候，后端还没响应回来，我们会忍不住又点了一次，这样在提交的时候就会增加两条一样的信息。为了防止这种操作，我们前端就控制让其点了一次之后等过n秒之后才能再次提交。当然前端使用这种方式是不可能完全解决这种问题的，需要后端使用幂等函数来解决。
- 一段时间内执行多次，只有最后 一次生效。举个栗子：123会每移入一次就会执行一次，但是只有等到执行的动作超过2秒之后才会打印234，234里面的代码就是防抖要执行的代码。一直触发间隔小于2秒不会执行。
- 节流：在n秒内触发多次，等待n秒之后再执行
- 一段时间内执行多次，每隔一段时间之后才会被触发：例子：123会每移入一次就会执行一次，但是只有等到执行的动作。就算是你触发的间隔小于2秒，但是执行的间隔时长超过了5秒也还是会被执行的。
注意点：
- 传入的函数可以拥有自己的this,如果不指定的话就默认指向window,这时如果我们想给每一box设置不同的样式的时候就设置不上。因此需要使用call或者apply来改变this指向问题。
- 传入的函数可以带参数，需要将原来的参数传到被执行的函数中。call,apply可以传参，只是传参形式不同。
废话不多说上代码：
<!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>
<style>
body {
background-color: gray;
}
#box,
#box1 {
width: 400px;
height: 400px;
display: flex;
justify-content: center;
align-items: center;
color: #ffffff;
margin: 0 auto;
font-size: 80px;
}
</style>
</head>
<body>
<!--写一个box给其绑定mouseover事件，鼠标移上去就会触发-->
<div id="box">1</div>
<div id="box1">1</div>
<script>
let count = 1;
let box = document.getElementById("box");
let box1 = document.getElementById("box1");
//debounce相当于是鼠标移上去的时候执行的函数，但是如果带上()就是执行函数，因此我们需要让debounce函数返回一个函数，以供执行真正的操作
box.onmouseover = debounce(handleMouseOver, 2000);
box1.onmouseover = debounce(handleMouseOver1, 2000);
box.onmouseover = throttle(handleMouseOver, 5000);
function handleMouseOver(e) {
console.log(234);
this.style.color = "red";
box.innerHTML = parseInt(box.innerText) + 1;
}
function handleMouseOver1(e) {
this.style.color = "green";
box1.innerHTML = parseInt(box1.innerText) + 2;
}
//防抖函数
function debounce(fn, await) {
let timer = null;
return function () {
let args = arguments;
let context = this;
clearTimeout(timer);
console.log(123);
timer = setTimeout(function () {
fn.call(context, ...args);
}, await);
};
}
//节流函数
function throttle(func, wait) {
var context, args;
var previous = 0;
return function () {
console.log(123);
var now = +new Date();
context = this;
args = arguments;
if (now - previous > wait) {
func.apply(context, args);
previous = now;
}
};
}
</script>
</body>
</html>
2022.3.19补充
节流函数的另一种实现方式：
//使用定时器
function throttle(fn,wait){
let timer = null;
return function(){
let context = this,args = arguments;
//只有在当前的timer执行完毕销毁之后才会进行下一次的调用
if(!timer){
timer = setTimeout(()=>{
fn.call(context,...args)
},wait)
}
}
}
两者的区别：
防抖函数：在一定时间内执行一个方法多次，只执行最后一次。因为在事件触发会先清理timer，如果时间间隔不到则会被清理掉，只有你的间隔到了之后才会执行，因此前面的函数都会被清理掉。
节流函数：在一定时间内执行一个方法多次，只有第一次生效。因为在事件触发后会先判断timer是否存在，只有不存在的时候才会执行。
相当于防抖是强制清理，节流是不到时间进不了大门。
网友评论