一句话概括节流:高频事件触发,在n秒内只会执行一次,所以节流处理执行频率。
总结
节流函数是前端开发中常用的性能优化手段,通过控制函数的执行频率,可以有效地降低资源消耗,提升用户体验。在实际项目中,合理使用节流函数能够有效应对各种需要频繁触发的场景,是优化前端性能的重要一环。
效果:
一秒内,输入打印,结果:限制函数执行频率的方法,确保函数在一定时间间隔内最多执行一次
节流 throttle
// 节流函数,设置默认时间为200毫秒
const throttle = (func, delay= 200) => {
if (typeof func !== 'function') {
throw new TypeError('需要一个函数作为参数');
}
delay= +delay|| 0;
let lastTime = 0;
return function () {
const self = this;
const args = arguments;
let currentTime = +new Date(); // 获取当前时间
if (currentTime - lastTime > delay || !lastTime) {
// 如果距离上次执行的时间超过了间隔时间,或者是第一次调用
func.apply(self, args); // 执行函数
lastTime = currentTime; // 更新上次执行时间
}
};
};
使用方法
假设我们有一个需求:在用户输入内容后,每隔1秒执行相应的操作,例如发送网络请求或更新界面。我们可以利用上述节流函数来实现这一需求。
// 输入内容即显示
changeInput () {
console.log('输入内容即显示', this.userName);
// 调用节流的方法
this.console()
},
// 节流 输入后 1s 内只会请求一次
console:throttle(function() {
console.log('节流打印', this.userName);
// 这里就可以调用请求方法
}, 1000),
在这个示例中,changeInput
方法用于监听用户的输入事件,而 console
方法则是通过 throttle
函数包裹,确保在1秒内最多执行一次。这样就能有效地减少函数的频繁执行,提高页面的响应速度和性能表现。
一般项目直接使用:
// 节流 输入后 1s 内只会请求一次
changeInput:throttle(function() {
console.log('节流打印', this.userName);
// 这里就可以调用请求方法
}, 1000),
代码解释:
-
函数功能:
- 节流(Throttle) 是一种限制函数执行频率的方法,确保函数在一定时间间隔内最多执行一次。在你的实现中,通过比较当前时间与上次执行时间的差值来决定是否执行函数。
-
参数与返回值:
func
是要执行的函数,delay 是执行的时间间隔,默认为 200 毫秒。- 返回一个闭包函数,实际执行时会根据时间间隔控制是否执行
func
。
-
时间处理:
currentTime - lastTime >
delay 表示距离上次执行的时间超过了指定的间隔时间,此时执行func
。!lastTime
表示第一次调用时也会直接执行func
。
-
执行上下文和参数传递:
- 使用
apply(self, args)
来确保在闭包函数中正确传递执行上下文和参数。
- 使用
-
注意事项:
- 确保节流函数在不同场景下的适用性,例如处理用户输入、滚动事件等需要控制频率的情况。
- 可以根据实际需要调整 delay 参数,以满足特定场景下的执行频率要求。
-
返回函数的执行频率:
- 节流函数保证了
func
在 delay 内最多执行一次。如果在短时间内频繁触发调用,函数执行会被限制在指定的时间间隔内,从而减少不必要的计算或操作。
- 节流函数保证了
这种实现方式可以有效地应用于需要限制函数执行频率的场景,提升应用性能和用户体验。
关于当防抖,请点击这里:手写防抖debounce