【Vue】关于鼠标移入移出状态防抖

概述

鼠标移入切换另一张图，但快速移动鼠标容易出现鼠标已经移出，状态还是移入的情况

代码

<template>
  <div class="solution-main" @mouseleave="mouseOut()" @mouseover="mouseIn()">
  鼠标区域
  </div>
</template>

<script setup>
watch(mouseEnter, async (newVal) => {
  if (newVal) {
    // mouseOut
    // ...
  } else {
    // mouseIn
    // ...
  }
})

let mouseTimer = null
// 鼠标移入 false
const mouseIn = () => {
  // 清除之前的计时器，确保只执行最后一次移入
  clearTimeout(mouseTimer)
  mouseTimer = setTimeout(() => {
    mouseEnter.value = false // 移入状态
  }, 100) // 50ms防抖，可根据需要调整
}

// 鼠标移出
const mouseOut = () => {
  // 清除之前的计时器，确保只执行最后一次移出
  clearTimeout(mouseTimer)
  mouseTimer = setTimeout(() => {
    mouseEnter.value = true // 移出状态
  }, 100)
}
</script>