使用Vue封裝一個(gè)可隨時(shí)暫停啟動(dòng)無(wú)需擔(dān)心副作用的定時(shí)器
現(xiàn)成輪子:VueUse 庫(kù)的 useIntervalFn 方法
是什么?
創(chuàng)建定時(shí)器的組合式函數(shù)
為什么要用它?
定時(shí)執(zhí)行回調(diào)(入?yún)ⅲ换卣{(diào)函數(shù)、時(shí)間間隔、配置項(xiàng))
控制定時(shí)器的行為(返回:開始、暫停定時(shí)器的方法)
響應(yīng)式間隔(入?yún)⒌臅r(shí)間間隔可以是一個(gè) 響應(yīng)式引用ref 或者一個(gè)函數(shù),當(dāng)它的值改變,定時(shí)器會(huì)自動(dòng)更新其間隔時(shí)間,無(wú)需手動(dòng)重啟定時(shí)器)
立即執(zhí)行選項(xiàng)(入?yún)?options.immediate 控制 是否在初始化時(shí)立即啟動(dòng)定時(shí)器;入?yún)?options.immediateCallback 控制是否在調(diào)用resume方法猴立即執(zhí)行一次回調(diào)函數(shù))
怎么用?
官網(wǎng)有說怎么安裝依賴,就不過多解釋:https://vueuse.org/shared/useIntervalFn/
分析源碼 & 自己手寫一個(gè)
源碼
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
/**
* 它可能是一個(gè) ref 對(duì)象,或者一個(gè)普通的值
*/
export type MaybeRef<T = any> =
| T
| Ref<T>
| ShallowRef<T>
| WritableComputedRef<T>
/**
* 它可能是一個(gè) ref 對(duì)象,或者一個(gè)普通的值,或者一個(gè) getter 函數(shù)
* @param cb
* @param interval
*/
export type MaybeRefOrGetter<T = any> = MaybeRef<T> | ComputedRef<T> | (() => T)
/**
* 獲取值、ref 或 getter 的實(shí)際值
*/
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'
/**
* 是否處于一個(gè) Vue 3 的響應(yīng)式 effect 生命周期的作用域內(nèi)。如果是的話,它會(huì)注冊(cè)一個(gè)清理函數(shù)(fn 參數(shù)),該函數(shù)會(huì)在作用域結(jié)束時(shí)執(zhí)行;如果不是在這樣的作用域內(nèi),那么它將不做任何操作。
* @param fn
*/
export function tryOnScopeDispose(fn: Fn) {
if (getCurrentScope()) {
onScopeDispose(fn)
return true
}
return false
}
export interface UseIntervalOptions {
/**
* 立即執(zhí)行這個(gè)定時(shí)器
*/
immediate?: boolean
/**
* 在調(diào)用 resume 函數(shù)后,立即執(zhí)行回調(diào)函數(shù)
*/
immediateCallback?: boolean
}
export interface Pausable {
/**
* 一個(gè) ref 表示 pausable 實(shí)例是否處于活動(dòng)狀態(tài)
*/
isActive: Readonly<Ref<boolean>>
/**
* 暫停定時(shí)器
*/
pause: Fn
/**
* 恢復(fù)定時(shí)器
*/
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
}
}到此這篇關(guān)于使用Vue封裝一個(gè)可隨時(shí)暫停啟動(dòng)無(wú)需擔(dān)心副作用的定時(shí)器的文章就介紹到這了,更多相關(guān)Vue封裝定時(shí)器內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue項(xiàng)目中的遇錯(cuò):Invalid?Host?header問題
這篇文章主要介紹了vue項(xiàng)目中的遇錯(cuò):Invalid?Host?header問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-07-07
vue?mixins代碼復(fù)用的項(xiàng)目實(shí)踐
本文主要介紹了vue?mixins代碼復(fù)用的項(xiàng)目實(shí)踐,文中通過示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-05-05
vue搜索高亮popsearch組件的實(shí)現(xiàn)示例
有時(shí)候給頁(yè)面內(nèi)容添加一個(gè)關(guān)鍵詞搜索功能,如果搜索結(jié)果能夠像瀏覽器搜索一樣高亮顯示,那找起來就會(huì)很明顯體驗(yàn)會(huì)好很多,本文就來介紹一下vue搜索高亮popsearch組件的實(shí)現(xiàn)示例,感興趣的可以了解一下2023-09-09
Vue兩個(gè)版本的區(qū)別和使用方法(更深層次了解)
在我們使用 vue時(shí),我們可以引用兩個(gè)不同版本的 Vue,分別是 Vue完整版(vue.js)和 Vue(vue.runtime.js )非完整版,那么它們的區(qū)別是什么呢,今天我們就來分析下這兩個(gè)不同版本之間的區(qū)別,一起看看吧2020-02-02
vue數(shù)組動(dòng)態(tài)刷新失敗問題及解決
這篇文章主要介紹了vue數(shù)組動(dòng)態(tài)刷新失敗問題及解決,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
vue使用webPack打包發(fā)布后頁(yè)面顯示空白的解決
這篇文章主要介紹了vue使用webPack打包發(fā)布后頁(yè)面顯示空白的解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-06-06
在vue中嵌入外部網(wǎng)站的實(shí)現(xiàn)
這篇文章主要介紹了在vue中嵌入外部網(wǎng)站的實(shí)現(xiàn)方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-11-11
vue3 Element Plus中icon圖標(biāo)不顯示的解決方案
這篇文章主要介紹了vue3 Element Plus中icon圖標(biāo)不顯示的解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03

