小程序防抖和节流封装
时间: 2023-10-19 14:05:44 浏览: 100
防抖节流函数js封装模块
小程序的防抖和节流是常用的优化技术,可以提高小程序的性能和用户体验。下面是一个简单的防抖和节流封装示例。
防抖函数(Debounce)是指在一定时间内只触发一次函数执行,如果在这个时间内再次触发,则重新计时。可以使用定时器实现:
```javascript
function debounce(fn, delay) {
let timer = null;
return function(...args) {
clearTimeout(timer);
timer = setTimeout(() => {
fn.apply(this, args);
}, delay);
};
}
```
节流函数(Throttle)是指在一定时间内只触发一次函数执行,无论触发频率多高。可以使用时间戳实现:
```javascript
function throttle(fn, delay) {
let previous = 0;
return function(...args) {
const now = Date.now();
if (now - previous > delay) {
fn.apply(this, args);
previous = now;
}
};
}
```
使用示例:
```javascript
// 防抖示例
const debouncedFn = debounce(function() {
// 需要防抖执行的函数
}, 300);
// 节流示例
const throttledFn = throttle(function() {
// 需要节流执行的函数
}, 300);
```
以上是一个简单的防抖和节流封装示例,你可以根据具体需求进行定制和调整。
阅读全文