Javascript 在大容量数据上设置超时

我已经尝试过用谷歌搜索整个堆栈溢出，但我认为这可以归结为我用来搜索的关键字

基本上，我的问题归结为以下几点：

当光标离开元素时，在关闭元素之前等待500毫秒。关闭元素之前，请检查光标是否回到元素中，如果没有，请不要隐藏它

我正在使用

vuejs

来执行此操作，但我将问题归结为使用

setTimeout

函数。我拥有代码的部分在这里发布相当复杂，因此我创建了一个简单的

POC

来演示问题：

<template>
  <div id="app">
    <ul v-for="x in 2000" :key="x">
      <li @mouseenter="handleMouseEnter(x)" @mouseleave="handleMouseLeave(x)" style="height: 50px;">
        Hello
        <span style="background-color: red" v-show="showBox[x]">BOX</span>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "App",
  components: {},
  methods: {
    handleMouseEnter(index) {
      setTimeout(() => {
        let showBox = [...this.showBox];
        showBox[index] = true;
        this.showBox = showBox;
      }, 500);
    },
    handleMouseLeave(index) {
      let showBox = [...this.showBox];
      showBox[index] = false;
      this.showBox = showBox;
    }
  },
  data() {
    return {
      showBox: []
    };
  },
  created() {
    for (let i = 0; i <= 2000; i++) {
      this.showBox[i] = false;
    }
  }
};
</script>

你好
盒子


导出默认值{
名称：“应用程序”，
组件：{}，
方法：{
HandleMouseCenter（索引）{
设置超时（（）=>{
让showBox=[…this.showBox]；
显示框[索引]=真；
this.showBox=showBox；
}, 500);
},
handleMouseLeave（索引）{
让showBox=[…this.showBox]；
显示框[索引]=假；
this.showBox=showBox；
}
},
数据（）{
返回{
陈列柜：[]
};
},
创建（）{
例如（假设i=0；i您的示例的操作方式似乎与原始问题描述相反（计时器正在显示而不是隐藏），但我想我明白了您的意思

正如您所建议的，问题是在触发
mouseleave
事件后调用计时器回调。因此红色框确实会隐藏，但不久之后计时器就会触发并将其返回

在下面的示例中，我只是使用
clearTimeout
取消了计时器。一般来说，可能需要存储一个这样的计时器数组，每个元素一个，但在这个特定的示例中，我认为一次激活一个计时器才有意义，这样我就可以不用数组了

我还将
showBox
的初始数量移动到
data
中。似乎没有理由在这里使用创建的
钩子

无需每次复制整个数组，您只需使用
$set
在现有数组中设置值即可。在我的示例中，我没有更改此值

我还要注意的是，对于这个特定的示例，您不需要一个数组来保存所有的
showBox
值。一次只能看到一个红色框，因此您只需要一个属性来保存当前可见框的索引。在我的示例中，我没有改变这一点，因为我怀疑您的实际用例并不像这样简单


newvue({
el:“#应用程序”，
方法：{
HandleMouseCenter（索引）{
this.currentTimer=setTimeout（（）=>{
让showBox=[…this.showBox]；
显示框[索引]=真；
this.showBox=showBox；
}, 500);
},
handleMouseLeave（索引）{
clearTimeout（此.currentTimer）
让showBox=[…this.showBox]；
显示框[索引]=假；
this.showBox=showBox；
}
},
数据（）{
常量显示框=[]；
for（设i=0；i