前言
在上一篇文章中我们讲到了防抖
函数,这是一个在开发中十分常见且重要的函数。这一次我们要开始讲它另一个好伙伴------节流
!
什么是节流?
节流
是一种前端优化技术,用于控制函数在一定时间内被调用的频率,确保函数不会以超过指定的时间间隔过快地连续调用。节流的目的是减少函数执行的频率,避免过于频繁的操作导致性能问题。
节流的应用场景
滚动事件处理
:在处理滚动事件时,防止因为用户快速滚动而导致事件处理函数过于频繁地执行。
窗口大小调整
:当用户调整浏览器窗口大小时,限制事件处理函数的执行频率,确保在一定时间内只执行一次。
输入框输入
:在处理输入框输入事件时,避免每次按键都触发处理函数,而是在用户停止输入一段时间后再执行。
如何实现节流
下面我们来通过案例分析:
js
// 获取id为'btn'的按钮元素
let btn = document.getElementById('btn');
// 定义一个函数 send,用于模拟提交操作
function send() {
console.log('提交了');
}
// 通过事件监听给按钮添加点击事件,使用节流函数 throttle 包装 send 函数
btn.addEventListener('click', throttle(send, 1000));
// 定义节流函数 throttle
function throttle(fn, delay) {
// 使用 Date.now() 获取当前时间戳,将其赋给 prevTime
let prevTime = Date.now();
return function () {
if (Date.now() - prevTime > delay) {
fn.apply(this, arguments);
prevTime = Date.now();
}
};
}
我们来分析这个案例中的代码:
js
btn.addEventListener('click', throttle(send, 1000));
使用addEventListener
给按钮添加了一个点击事件监听器。当按钮被点击时,调用throttle
函数,将send
函数和节流的延迟时间(1000毫秒)作为参数传入。
js
let prevTime = Date.now();
使用Date.now()
获取当前时间戳,将其赋给prevTime
。这个变量用于追踪上一次节流函数调用的时间。
js
function throttle(fn, delay) {
// 使用 Date.now() 获取当前时间戳,将其赋给 prevTime
return function () {
if (Date.now() - prevTime > delay) {
fn.apply(this, arguments);
prevTime = Date.now();
}
};
}
在返回的函数内部,它检查自上一次调用prevTime
以来经过的时间是否大于指定的delay
。如果是,就使用 fn.apply(this, arguments)
调用原函数fn
,并更新prevTime
为当前时间戳。
节流的工作流程
1.初始化
:在节流函数被调用时,初始化一个变量prevTime
为当前时间戳,用于追踪上一次函数调用的时间。
2.时间间隔检查
:计算当前时间与上一次函数调用的时间间隔:Date.now()
- prevTime
。
3.判断是否执行原函数
:如果时间间隔大于等于设定的延迟时间(delay),则执行原函数。如果时间间隔小于延迟时间,忽略这次调用,不执行原函数。
4.更新时间戳
:如果原函数被执行,更新prevTime
为当前时间戳,表示这次函数调用的时间。
总结
虽然节流函数让我们在开发中更加方便,但是它也有一些不足,比如如果在两次触发之间的时间间隔内频繁触发事件,可能会导致一些事件被丢失。