使用Vue封裝一個可隨時暫停啟動無需擔心副作用的定時器
現(xiàn)成輪子:VueUse 庫的 useIntervalFn 方法
是什么?
創(chuàng)建定時器的組合式函數(shù)
為什么要用它?
定時執(zhí)行回調(diào)(入?yún)ⅲ换卣{(diào)函數(shù)、時間間隔、配置項)
控制定時器的行為(返回:開始、暫停定時器的方法)
響應式間隔(入?yún)⒌臅r間間隔可以是一個 響應式引用ref 或者一個函數(shù),當它的值改變,定時器會自動更新其間隔時間,無需手動重啟定時器)
立即執(zhí)行選項(入?yún)?options.immediate 控制 是否在初始化時立即啟動定時器;入?yún)?options.immediateCallback 控制是否在調(diào)用resume方法猴立即執(zhí)行一次回調(diào)函數(shù))
怎么用?
官網(wǎng)有說怎么安裝依賴,就不過多解釋:https://vueuse.org/shared/useIntervalFn/
分析源碼 & 自己手寫一個
源碼
https://github1s.com/vueuse/vueuse/blob/main/packages/shared/useIntervalFn/index.ts
自己手寫
安裝vue-demi依賴后,就可以開始手寫啦~
import type { ComputedRef, Ref, ShallowRef, WritableComputedRef } from 'vue-demi'
import { getCurrentScope, isRef, onScopeDispose, ref, unref, watch } from 'vue-demi'
/**
* Void函數(shù)
*/
export type Fn = () => void
/**
* 任意函數(shù)
*/
export type AnyFn = (...args: any[]) => any
/**
* 它可能是一個 ref 對象,或者一個普通的值
*/
export type MaybeRef<T = any> =
| T
| Ref<T>
| ShallowRef<T>
| WritableComputedRef<T>
/**
* 它可能是一個 ref 對象,或者一個普通的值,或者一個 getter 函數(shù)
* @param cb
* @param interval
*/
export type MaybeRefOrGetter<T = any> = MaybeRef<T> | ComputedRef<T> | (() => T)
/**
* 獲取值、ref 或 getter 的實際值
*/
export function toValue<T>(r: MaybeRefOrGetter<T>): T {
return typeof r === 'function' ? (r as AnyFn)() : unref(r)
}
/***
* 是否為客戶端
*/
export const isClient = typeof window !== 'undefined' && typeof document !== 'undefined'
/**
* 是否處于一個 Vue 3 的響應式 effect 生命周期的作用域內(nèi)。如果是的話,它會注冊一個清理函數(shù)(fn 參數(shù)),該函數(shù)會在作用域結(jié)束時執(zhí)行;如果不是在這樣的作用域內(nèi),那么它將不做任何操作。
* @param fn
*/
export function tryOnScopeDispose(fn: Fn) {
if (getCurrentScope()) {
onScopeDispose(fn)
return true
}
return false
}
export interface UseIntervalOptions {
/**
* 立即執(zhí)行這個定時器
*/
immediate?: boolean
/**
* 在調(diào)用 resume 函數(shù)后,立即執(zhí)行回調(diào)函數(shù)
*/
immediateCallback?: boolean
}
export interface Pausable {
/**
* 一個 ref 表示 pausable 實例是否處于活動狀態(tài)
*/
isActive: Readonly<Ref<boolean>>
/**
* 暫停定時器
*/
pause: Fn
/**
* 恢復定時器
*/
resume: Fn
}
export function useIntervalFn(cb: Fn, interval: MaybeRefOrGetter<number> = 1000, options: UseIntervalOptions = {}): Pausable {
const {
immediate = true,
immediateCallback = true
} = options
let timer: ReturnType<typeof setInterval> | null = null
const isActive = ref(false)
function clean() {
if (timer) {
clearInterval(timer)
timer = null
}
}
function pause() {
isActive.value = false
clean()
}
function resume() {
const intervalValue = toValue(interval)
if (intervalValue <= 0) {
return
}
isActive.value = true
if (immediateCallback){
cb()
}
clean()
if (isActive.value) {
timer = setInterval(cb, intervalValue)
}
}
if (immediate && isClient) {
resume()
}
if (isRef(interval) || typeof interval === 'function') {
const stopWatch = watch(interval, () => {
if (isActive.value && isClient) {
resume()
}
})
tryOnScopeDispose(stopWatch)
}
tryOnScopeDispose(pause)
return {
isActive,
pause,
resume
}
}到此這篇關于使用Vue封裝一個可隨時暫停啟動無需擔心副作用的定時器的文章就介紹到這了,更多相關Vue封裝定時器內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
vue項目中的遇錯:Invalid?Host?header問題
這篇文章主要介紹了vue項目中的遇錯:Invalid?Host?header問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-07-07
vue使用webPack打包發(fā)布后頁面顯示空白的解決
這篇文章主要介紹了vue使用webPack打包發(fā)布后頁面顯示空白的解決方案,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-06-06
vue3 Element Plus中icon圖標不顯示的解決方案
這篇文章主要介紹了vue3 Element Plus中icon圖標不顯示的解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03

