Javascript 在播放视频时播放'；已在VueJs中加载（超过最大调用堆栈大小）

我试图实现的功能，当用户鼠标越过div，一些视频将被播放。我有这些组件，每页呈现25次

<LocationStripeItemComponent
        v-for="(l, index) in locations" :key="index" :location="l">
</LocationStripeItemComponent>

我认为问题在于：

setTimeout(this.previewTrailerVideo(showState), 1000);

---

因为递归函数被调用的次数太多，但我不知道如何才能得到我的视频元素，因为在有人将鼠标添加到元素上之前，它是隐藏的。是否有其他方法可以检测元素在页面上何时可见？如何正确实现此功能？加油

问题1

您使用设置超时的方式不正确

应该传递给

seTimeout

的第一个参数应该是一个函数。在您的代码中，您正在传递

未定义的
：

setTimeout(this.previewTrailerVideo(showState), 1000);

因为函数
previewTrailerVideo
不返回任何内容，这意味着
未定义

换句话说，
setTimeout
根本没有运行。也就是说，您得到的错误不是来自
setTimeout

问题2

您得到的错误实际上来自您使用
setTimeout
（而不是
setTimeout
本身）的方式。在同一行中：

setTimeout(this.previewTrailerVideo(showState), 1000);

虽然没有正确调用
setTimeout
，但是递归工作得非常好（这就是错误发生的地方），因为在这一行中，当
showState==true
时，您实际上是在一次又一次地调用函数

解决方案

只需将该行编辑为：

setTimeout(this.previewTrailerVideo.bind(this, showState), 1000);

详情请参阅

简而言之，
.bind
方法不会调用您的函数，但会将参数传递到您的函数中，并返回已包含这些参数的函数

通过使用
.bind
，您现在将假定的函数传递到
setTimeout
（问题1），并停止递归（问题2）。
您需要一个mouseover事件。看看这个啊，我不知道！非常感谢。
setTimeout(this.previewTrailerVideo(showState), 1000);

setTimeout(this.previewTrailerVideo.bind(this, showState), 1000);