JS中的防抖、节流
高仁龙 2024-10-15 13:05:01 阅读 77
一. 概念
防抖：顾名思义，防止抖动，指连续调用时，只有最后一次生效。
节流：节省流量，固定时间间隔触发一次，减小频率。
二. 举例：
搜索功能，在用户输入结束以后才开始发送搜索请求，可以使用函数防抖来实现；验证账号密码功能，在用户输入密码结束以后才开始发送验证请求，可以使用函数防抖来实现；
简单来说：某件事你并不想它太过频繁触发，那么设置一个定时器，每次进来的时候都清除原本的定时器，然后重新开始计时。
你不想频繁为你女票买单，于是约好每月清空购物车1次防止过快拖动滚动条，导致 JS 跟不上拖动频率，通过节流限制每秒触发监听的次数（固定时间固定频率）
简单来说：年轻人要保持一日三餐，规律作息，那就通过节流来限制。
三. 手写防抖、节流思路
1. 首先函数需要哪些参数？
都需要传递一个函数进去，返回一个防抖、节流后的新函数，因此第一个参数是需要处理的原函数fn光有原函数还不行，因为我们需要规定一个时间间隔。对于防抖而言：时间间隔用于表明最后一次调用时，隔多久没有再次触发，我们才真正调用函数。譬如，放盐时，手一直抖动，直到连续5秒没有抖动了，那么才放盐。这个5秒就是时间间隔。对于节流而言：时间间隔用于标志，每隔多久我们真正触发函数调用。就像是，一天只吃3顿，那么只有每顿间隔4个小时，我们才能吃饭。在没到4个小时时，不允许吃东西。所以，第二个参数是时间间隔，可写为wait
现在，我们可以写出防抖和节流函数的基本结构和参数：
<code>// 防抖
function debounce(fn, wait=500) {
return function () {
}
}
// 节流
function throttled(fn, wait=500) {
return function () {
}
}
2. 原函数的执行条件是什么？
对于防抖，当连续触发时，我们的目标是，不抖动时才调用。这也就是说，不满足时间间隔时，后一次触发会覆盖掉前一次触发。当满足时间间隔时，才会真正执行。
满足时间间隔，指的是某一次触发之后，时间间隔范围内，没有下一次触发，这样不产生覆盖，因此会真正执行。由于有时间间隔的判断，因此即便真正执行，也需要延迟到时间间隔之后。这显然是定时器的概念。
对于节流，当连续触发时，我们的目标是，每隔时间间隔时调用一次。这也就是说，我们每次设定固定时间的一个定时器，当定时器存在就什么都不做，当定时器不存在，就设定下一次的定时器。
综上，我们可以大致写出函数的执行时机，结构如下：
// 防抖
function debounce(func, wait=500) {
let timeout;
return function () {
clearTimeout(timeout)
timeout = setTimeout(() => {
// 原函数执行部分
}, wait);
}
}
// 节流
function throttle(fn, wait = 500) {
let timer = null
return function () {
if (!timer) {
timer = setTimeout(() => {
// 原函数执行部分
}, wait);
}
}
}
3. 原函数执行
我们只需要直接调用fn，即fn()即可。但这样不够完善，需要注意两点：
其一是this指向，新函数中调用原函数，两者的this指向应该一致；其二是参数，新函数中调用原函数，两者接收的参数应该一致。
故而，我们应该努力让新旧函数在这两方面保持一致。
// 防抖
function debounce(func, wait=500) {
let timeout;
return function (...args) {
clearTimeout(timeout)
timeout = setTimeout(() => {
fn.apply(this, args)
}, wait);
}
}
// 节流
function throttle(fn, wait=500) {
let timer = null
return function (...args) {
if (!timer) {
timer = setTimeout(() => {
fn.apply(this, args)
}, wait);
}
}
}
注1：setTimeout回调中使用arguments：
若不是箭头函数，接收的是回调的实际参数，而不是新函数的实际参数。
若是箭头函数，由于箭头函数没有arguments对象，接收的就是新函数的实际参数。
注2：setTimeout回调中使用this：
若是箭头函数，由于箭头函数没有this，因此回调中的this是外层的this，
若不是箭头函数，回调中的this指向window。
4. 计时器何时重置？
在上面的代码中，防抖和节流何时进行计时器的重置呢？
对于防抖：每次调用都会清除掉上一次的定时器，因此每次触发都会重置，可以看到clearTimeout写在定时器之前。对于节流：一开始没有定时器，触发事件后检测定时器是否存在，如果不存在则开启定时器执行函数，执行完函数后，在把定时器设为无，准备下一次开启定时器执行函数
故针对节流函数，增加清除操作,即增加timer=null重置语句：
// 防抖
function debounce(func, wait=500) {
let timeout;
return function (...args) {
clearTimeout(timeout)
timeout = setTimeout(() => {
func.apply(this, args)
}, wait);
}
}
// 节流
function throttle(fn, wait = 500) {
let timer = null
return function (...args) {
if (!timer) {
timer = setTimeout(() => {
fn.apply(this, args);
timer = null;
},wait);
}
}
}
详情参考
完整的防抖用例
<body>
<button id="debounce">点我防抖！</button>code>
<script>
// 防抖
function debounce(func, wait = 500) {
let timeout = null;
return function (...args) {
clearTimeout(timeout)
timeout = setTimeout(() => {
func.apply(this, args)
}, wait);
}
}
function sayDebounce() {
console.log(this);
console.log("防抖成功！");
}
window.onload = function () {
var myDebounce = document.getElementById("debounce");
myDebounce.addEventListener("click", debounce(sayDebounce));
}
</script>
</body>
完整的节流用例
<body>
<button id="throttle">点我节流！</button>code>
<script>
// 节流
function throttle(fn, wait = 500) {
let timer = null
return function (...args) {
if (!timer) {
timer = setTimeout(() => {
fn.apply(this, args);
timer = null;
}, wait);
}
}
}
function sayThrottle() {
console.log("节流成功！");
}
window.onload = function () {
var myThrottle = document.getElementById("throttle");
myThrottle.addEventListener("click", throttle(sayThrottle));
}
</script>
</body>
声明
本文内容仅代表作者观点，或转载于其他网站，本站不以此文作为商业用途
如有涉及侵权，请联系本站进行删除
转载本站原创文章，请注明来源及作者。