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