delay —— Normalisation des délais

Un tooltip doit « apparaître immédiatement au survol de la souris, disparaître un peu après le départ » (pour éviter de clignoter au passage) ; un popconfirm doit « apparaître immédiatement au clic ». Chaque composant flottant a son propre rythme d’apparition et de disparition, mais la question « quelle valeur par défaut utiliser lorsque l’utilisateur n’a rien transmis » est commune.

Quand l’utiliser

• Les couches flottantes de survol que sont tooltip / popover / popconfirm, dont les props exposent show-delay / hide-delay.
• Tout paramètre temporel « surchargeable par l’utilisateur, mais doté d’une valeur par défaut raisonnable ».

À éviter : les scénarios à chronologie fixe (la fermeture automatique de message au bout de 3 secondes) — écrivez la constante directement, inutile de passer par la normalisation.

Import

import { resolveDelay, type LhDefaultDelay } from '@lh-ui/share/core/shared/delay'

Types et fonction

export interface LhDefaultDelay {
  show: number
  hide: number
}

Fonction	Signature	Rôle
resolveDelay	(showDelay: number | undefined, hideDelay: number | undefined, defaults: LhDefaultDelay) => LhDefaultDelay	normalisation des délais d’affichage et de masquage

resolveDelay(undefined, undefined, { show: 0, hide: 150 })
// { show: 0, hide: 150 }   —— l'utilisateur n'a rien transmis, on utilise les valeurs par défaut du composant

resolveDelay(200, undefined, { show: 0, hide: 150 })
// { show: 200, hide: 150 } —— seul show a été surchargé

L’implémentation tient en deux ?? : showDelay ?? defaults.show, hideDelay ?? defaults.hide. null suit le même chemin (?? gérant null comme undefined).

Pourquoi en avoir fait une fonction à part

Les trois composants ont des valeurs par défaut différentes, mais la logique de normalisation est la même :

Composant	show par défaut	hide par défaut	Raison
tooltip	0	150	apparition immédiate pour éviter « aucune réaction au passage » ; disparition différée pour éviter le clignotement lors du déplacement vers la cible
popover	0	150	idem, mais le contenu est interactif, hide est plus long (défini par la couche UI)
popconfirm	0	0	déclenchement par clic, pas de sémantique de survol

Une fois extraite, l’ajout d’un nouveau composant flottant se borne à transmettre ses propres defaults, sans avoir à réécrire le « repli sur undefined ».

La différence avec debounce

Deux notions faciles à confondre :

	resolveDelay	debounce (utils)
Sémantique	normalisation des paramètres « combien attendre avant d’afficher / masquer cette fois »	outil de limitation qui regroupe des appels à haute fréquence en une seule exécution
Usage	calculer la valeur du délai	utiliser la valeur du délai pour encapsuler un véritable minuteur

La chaîne typique est en série : const { hide } = resolveDelay(props.hideDelay, undefined, DEFAULTS) → hideTimer = debounce(actualHide, hide).

Exemples d’utilisation

// Au sein du composant popover
const DEFAULT_DELAY: LhDefaultDelay = { show: 0, hide: 150 }

const delay = computed(() =>
  resolveDelay(props.showDelay, props.hideDelay, DEFAULT_DELAY),
)

function onShow() {
  setTimeout(open, delay.value.show)
}
function onHide() {
  setTimeout(close, delay.value.hide)
}

Points d’attention

• Uniquement un repli, pas de clamping : un délai négatif est renvoyé tel quel. Si chaque couche UI exige « le délai doit être non négatif », traitez-le au niveau du setTimeout(fn, Math.max(0, ms)) (setTimeout traite les valeurs négatives comme 0, aucun problème en pratique).
• show / hide sont indépendants : après normalisation, ce sont toujours deux nombres indépendants, à utiliser sur deux minuteurs distincts par le composant.
• Renvoie un nouvel objet : chaque appel renvoie un nouveau { show, hide }, qui peut être enveloppé de manière réactive en toute sécurité.

@lh-ui/share/core/delay → resolveDelay( )

运行重置

返回值

（填好参数后点运行）