35 changed files with 772 additions and 74 deletions
@ -0,0 +1,129 @@ |
|||
// 监听标签页是否是活跃状态
|
|||
let isActive = true; |
|||
|
|||
document.addEventListener('visibilitychange', () => { |
|||
isActive = !document.hidden; |
|||
}) |
|||
|
|||
/** |
|||
* 刷新间隔时间 |
|||
* interval: 1000 * 5 |
|||
* 立即执行一次 |
|||
* immediate: false |
|||
* 全局化的, 如果这个参数为 true, 则会影响到 vuex 中的 autoRefreshCountdown |
|||
* globalized: true |
|||
* 回调的函数, 不保证顺序执行 |
|||
* handles: ["getList"] |
|||
* 调用 handles 后的回调函数 |
|||
* 这个字段为数组类型, 数组中的每个元素都是一个函数, 在对应索引的 handle 执行后被调用 |
|||
* callbacks: [] |
|||
* debug: true |
|||
* |
|||
* @param Vue |
|||
* @return {{autoRefreshStates: {timer: null, stop: autoRefreshStates.stop, enable: autoRefreshStates.enable, maxExecuteTimes: number, currentExecuteTimes: number, interval: number, execute: autoRefreshStates.execute}}} |
|||
*/ |
|||
export default function (Vue) { |
|||
Vue.mixin({ |
|||
data () { |
|||
return { |
|||
autoRefreshStates: { |
|||
// 默认的刷新间隔
|
|||
interval: 1000 * 10, |
|||
// 最多执行的次数, 超出后停止
|
|||
maxExecuteTimes: 100, |
|||
// 当前执行的次数
|
|||
currentExecuteTimes: 0, |
|||
// 倒计时的定时器
|
|||
countdownTimer: null, |
|||
timer: null, |
|||
execute: () => { |
|||
this.$options.$autoRefresh.handles.forEach(async (methodName, index) => { |
|||
// 如果离开页面
|
|||
if (!isActive) { |
|||
return false; |
|||
} |
|||
// 如果 vuex 中的 autoRefresh 为 false 则不执行
|
|||
if (!this.$store.getters.autoRefresh) { |
|||
return false; |
|||
} |
|||
// 如果超出最大执行次数
|
|||
if (this.autoRefreshStates.currentExecuteTimes > this.autoRefreshStates.maxExecuteTimes) { |
|||
console.log(`[auto-refresh] ${methodName} is stopped because of maxExecuteTimes`) |
|||
this.autoRefreshStates.stop(); |
|||
return false; |
|||
} |
|||
// 如果是调试模式
|
|||
if (this.$options.$autoRefresh.debug) { |
|||
console.log(`[auto-refresh] ${methodName} is executing...`) |
|||
} |
|||
const res = await Promise.resolve(this[methodName]()); |
|||
// 如果是调试模式
|
|||
if (this.$options.$autoRefresh.debug) { |
|||
console.log(`[auto-refresh] ${methodName} is executed. result => `, res) |
|||
} |
|||
if (this.$options.$autoRefresh.callbacks && this.$options.$autoRefresh.callbacks[index]) { |
|||
this.$options.$autoRefresh.callbacks[index](res) |
|||
} |
|||
}, null) |
|||
}, |
|||
stop: () => { |
|||
if (!this.$options.$autoRefresh) { |
|||
return |
|||
} |
|||
// 如果是调试模式
|
|||
if (this.$options.$autoRefresh.debug) { |
|||
console.log("[auto-refresh] stop") |
|||
} |
|||
if (this.autoRefreshStates.timer) { |
|||
clearInterval(this.autoRefreshStates.timer) |
|||
} |
|||
this.autoRefreshStates.countdownTimer = 0; |
|||
this.$store.commit("app/SET_AUTO_REFRESH_COUNTDOWN", this.autoRefreshStates.countdownTimer) |
|||
}, |
|||
enable: () => { |
|||
if (!this.$options.$autoRefresh) { |
|||
return |
|||
} |
|||
// 如果是调试模式
|
|||
if (this.$options.$autoRefresh.debug) { |
|||
console.log("[auto-refresh] enable") |
|||
} |
|||
const interval = this.$options.$autoRefresh.interval || this.autoRefreshStates.interval; |
|||
this.autoRefreshStates.countdownTimer = interval / 1000; |
|||
this.$store.commit("app/SET_AUTO_REFRESH_COUNTDOWN", this.autoRefreshStates.countdownTimer) |
|||
this.autoRefreshStates.timer = setInterval( |
|||
() => { |
|||
this.autoRefreshStates.currentExecuteTimes++; |
|||
this.autoRefreshStates.countdownTimer = interval / 1000; |
|||
this.autoRefreshStates.execute(); |
|||
}, |
|||
interval |
|||
) |
|||
|
|||
setInterval(() => { |
|||
if (!isActive) { |
|||
return |
|||
} |
|||
this.autoRefreshStates.countdownTimer = (this.autoRefreshStates.countdownTimer - 1) > 0 ? (this.autoRefreshStates.countdownTimer - 1) : 0; |
|||
this.$store.commit("app/SET_AUTO_REFRESH_COUNTDOWN", this.autoRefreshStates.countdownTimer) |
|||
}, 1000) |
|||
}, |
|||
}, |
|||
} |
|||
}, |
|||
mounted () { |
|||
// 如果组件传递了自动刷新的配置项 并且 vuex 中的 autoRefresh 为 true
|
|||
if (this.$options.$autoRefresh && this.$store.getters.autoRefresh) { |
|||
if (this.$options.$autoRefresh.immediate) { |
|||
this.autoRefreshStates.execute(); |
|||
} |
|||
|
|||
this.autoRefreshStates.enable(); |
|||
} |
|||
}, |
|||
// 取消挂载
|
|||
beforeDestroy () { |
|||
this.autoRefreshStates.stop() |
|||
}, |
|||
}) |
|||
} |
|||
Binary file not shown.
Binary file not shown.
Loading…
Reference in new issue