javascript - 在 VueJs 中加载视频时显示视频(超出最大调用堆栈大小)

Question

我试图实现当用户鼠标悬停在 div 上时会播放一些视频的功能。我有这个组件，每页渲染 25 次

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

在这个组件里面，有如下代码

<template>
<div class="stripe__item card" @mouseover="previewTrailerVideo(true)" @mouseleave="previewTrailerVideo(false)">

    <div class="card__gradient"></div>
    <img :src="location.teaser_image" v-show="!hideImage"
         :alt="location.name" class="card__img"/>

    <div class="card__trailer_loading" v-show="miniTrailerLoading"></div>
    <video v-show="invokeMiniTrailerDiv" autoplay loop class="card__video" id="miniTrailer">
        <source :src="location.teaser_video">
    </video>
</div>
</template>

<script>
export default {
        name: 'LocationStripeItemComponent',
        props: {
            location: {
                type: Object,
                required: true
            }
        },
        data() {
            return {
                invokeMiniTrailerDiv: false,
                miniTrailerLoading: false,
                miniTrailerPlaying: false,
                hideImage: false
            }
        },
        methods: {
            previewTrailerVideo(showState) {
                if (showState) {

                    this.invokeMiniTrailerDiv = true;
                    this.miniTrailerLoading = true;

                    let video = document.getElementById('miniTrailer');
                    if (video.readyState === 4) {
                        this.miniTrailerLoading = false;
                        this.hideImage = true;
                        this.miniTrailerPlaying = true;
                    } else {
                       setTimeout(this.previewTrailerVideo(showState), 1000);
                    }
                } else {
                    this.invokeMiniTrailerDiv = false;
                    this.miniTrailerLoading = false;
                    this.miniTrailerPlaying = false;
                    this.hideImage = false;
                }
            },
        }
    };
</script>

我不断得到的错误是

Uncaught RangeError: Maximum call stack size exceeded
    at Object.reactiveSetter [as invokeMiniTrailerDiv] (vue.esm.js?efeb:998)
    at VueComponent.proxySetter [as invokeMiniTrailerDiv] (vue.esm.js?efeb:3300)
    at VueComponent.previewTrailerVideo (LocationStripeItemComponent.vue?2f13:93)
    at VueComponent.previewTrailerVideo (LocationStripeItemComponent.vue?2f13:102)
    at VueComponent.previewTrailerVideo (LocationStripeItemComponent.vue?2f13:102)
    at VueComponent.previewTrailerVideo (LocationStripeItemComponent.vue?2f13:102)
    at VueComponent.previewTrailerVideo (LocationStripeItemComponent.vue?2f13:102)
    at VueComponent.previewTrailerVideo (LocationStripeItemComponent.vue?2f13:102)
    at VueComponent.previewTrailerVideo (LocationStripeItemComponent.vue?2f13:102)
    at VueComponent.previewTrailerVideo (LocationStripeItemComponent.vue?2f13:102)

我认为问题出在这里:

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

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

Answer 1

问题 1

您使用 setTimeout 的方式不正确。

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

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

因为函数 previewTrailerVideo 什么都不返回，意思是 undefined。

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

问题2

您得到的错误实际上是您使用 setTimeout 的方式(而不是 setTimeout 本身)。在同一行中:

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

虽然 setTimeout 没有被正确调用，但是你的递归工作得很好(这是错误发生的地方)，因为在那一行你实际上是在调用你的函数，一次又一次，当 showState === true 时。

解决方案

只需将该行编辑为:

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

了解 .bind了解详情。

简而言之，.bind 方法不会调用您的函数，但会将参数传递给您的函数并返回您的函数，这些参数已经存在于函数中。

通过使用 .bind，您现在将假定的函数传递给 setTimeout(问题 1)，并停止递归(问题 2)。