如何在鼠标悬停时循环等待，而不将所有事件放入调用堆栈JS / Vue.js中

var timer;

function startLoop() {
  timer = setInterval(function() {
    // 在此处执行循环等待的操作
  }, 1000); // 每隔1秒执行一次操作
}

function stopLoop() {
  clearInterval(timer);
}

// 在鼠标悬停时启动循环等待
document.getElementById('elementId').addEventListener('mouseover', startLoop);

// 在鼠标移出时停止循环等待
document.getElementById('elementId').addEventListener('mouseout', stopLoop);

<template>
  <div>
    <div id="elementId" @mouseover="startLoop" @mouseout="stopLoop">
      <!-- 在此处放置需要悬停触发的内容 -->
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    startLoop() {
      this.timer = setInterval(() => {
        // 在此处执行循环等待的操作
      }, 1000); // 每隔1秒执行一次操作
    },
    stopLoop() {
      clearInterval(this.timer);
    }
  }
};
</script>