Add File
This commit is contained in:
89
frontend/src/utils/useEmitt.ts
Normal file
89
frontend/src/utils/useEmitt.ts
Normal file
@@ -0,0 +1,89 @@
|
||||
import mitt from 'mitt'
|
||||
import { onBeforeUnmount } from 'vue'
|
||||
|
||||
type EventCallback = (...args: any[]) => void
|
||||
|
||||
interface Option {
|
||||
name: string
|
||||
callback: EventCallback
|
||||
}
|
||||
|
||||
const emitter = mitt()
|
||||
|
||||
// Map to store debounce information
|
||||
const lazyDebounceMap = new Map<
|
||||
string,
|
||||
{
|
||||
timer: any | null
|
||||
isPending: boolean
|
||||
}
|
||||
>()
|
||||
|
||||
/**
|
||||
* Basic event emitter hook
|
||||
* @param option - Optional configuration with event name and callback
|
||||
* @returns Object containing the emitter instance
|
||||
*/
|
||||
export const useEmitt = (option?: Option) => {
|
||||
if (option) {
|
||||
emitter.on(option.name, option.callback)
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
emitter.off(option.name, option.callback)
|
||||
})
|
||||
}
|
||||
return {
|
||||
emitter,
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Debounced event emitter
|
||||
* @param eventName - Name of the event to emit
|
||||
* @param params - Parameters to pass with the event
|
||||
* @param delay - Debounce delay in milliseconds (default: 200ms)
|
||||
*/
|
||||
export const useEmittLazy = (eventName: string, params: any = null, delay = 150) => {
|
||||
// If there's already a pending execution, skip this call
|
||||
if (lazyDebounceMap.has(eventName)) {
|
||||
const entry = lazyDebounceMap.get(eventName)!
|
||||
if (entry.isPending) {
|
||||
return
|
||||
}
|
||||
}
|
||||
|
||||
// Clear existing timer if present
|
||||
if (lazyDebounceMap.has(eventName)) {
|
||||
const { timer } = lazyDebounceMap.get(eventName)!
|
||||
if (timer) {
|
||||
clearTimeout(timer)
|
||||
}
|
||||
}
|
||||
|
||||
// Set up a new timer
|
||||
const timer = setTimeout(() => {
|
||||
emitter.emit(eventName, params)
|
||||
|
||||
// Mark execution as complete
|
||||
if (lazyDebounceMap.has(eventName)) {
|
||||
lazyDebounceMap.get(eventName)!.isPending = false
|
||||
}
|
||||
}, delay)
|
||||
|
||||
// Store timer information and mark as pending
|
||||
lazyDebounceMap.set(eventName, {
|
||||
timer,
|
||||
isPending: true,
|
||||
})
|
||||
|
||||
// Clean up on component unmount
|
||||
onBeforeUnmount(() => {
|
||||
if (lazyDebounceMap.has(eventName)) {
|
||||
const { timer } = lazyDebounceMap.get(eventName)!
|
||||
if (timer) {
|
||||
clearTimeout(timer)
|
||||
}
|
||||
lazyDebounceMap.delete(eventName)
|
||||
}
|
||||
})
|
||||
}
|
||||
Reference in New Issue
Block a user