变量
// loadErr reloadData时,补充指数退避,避免加剧后台崩溃
attempt: 0,
// 最大尝试次数,通常用户3次会自己放弃
maxRetries: 5,
// 初始延迟时间(毫秒)
initialDelay: 1000,
// 延迟倍增因子
backoffFactor: 2,
// 是否加入随机抖动
jitter: true,
loaderrTimer: null as NodeJS.Timeout | null,
实际逻辑
记得清除定时器
- 创建一个视口交叉观察器实例,用于监测按钮是否在可视区域内(这个最好加一下,创建一个视口交叉观察器实例,用于监测按钮是否在可视区域内)
- 离开组件的时候
let { attempt, maxRetries, initialDelay, backoffFactor, jitter = true } = this.data || {};
if (attempt >= maxRetries) {
console.error('base-error 已达最大尝试次数, delay: ${delay}, attempt: ${attempt + 1}');
return;
}
attempt += 1;
// 这里退避可以自定义不用指数,只不过指数的方式会有递进拉开差距
let delay = initialDelay * backoffFactor ** (attempt - 1);
if (jitter) {
delay += Math.random() * delay;
}
if (this.data.loaderrTimer) {
clearTimeout(this.data.loaderrTimer);
}
this.data.loaderrTimer = setTimeout(() => {
// 触发回调更新
this.triggerEvent('reloadData');
}, delay),
});
表现