Question

我如何从此代码中删除setInterval，使其仍然可以正常工作。有人告诉我代码中不需要它，但是我不知道如何删除它并使代码像以前一样工作。

重要的是，它的工作方式与代码中的setInterval相同。

我的意思是“ 仍能正常工作”是，视频应出现在 1单击和“ 不” 2单击

此外，还有setInterval代码：

https://jsfiddle.net/hzyrfkwb/63/

在单击之前，没有YouTube内容会缓存在浏览器中。

它也需要以相同的方式工作。

这是我不知道该怎么做的事情。

setInterval代码：

https://jsfiddle.net/hzyrfkwb/63/

let apiIsReady = false;
    let timer;
    window.onYouTubePlayerAPIReady = function() {
        apiIsReady = true;
    };
    function init(opts) {
        loadPlayer();
        timer = setInterval(function checkAPIReady() {
            if (apiIsReady) {
                timer = clearInterval(timer);
                addVideo(opts.video, opts.playerVars || {});
            }
        }, 100);
    }
    return {
        init
    };
}());

这是完整的代码：

const videoPlayer = (function makeVideoPlayer() {
    "use strict";
    const players = [];

    function loadPlayer() {
        const tag = document.createElement("script");
        tag.src = "https://www.youtube.com/player_api";
        const firstScriptTag = document.getElementsByTagName("script")[0];
        firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
    }

    function onPlayerReady(event) {
        const player = event.target;
        player.setVolume(50); // percent
    }

    function onPlayerStateChange(event) {
        const player = event.target;
        if (event.data === YT.PlayerState.PLAYING) {
            const otherVideos = (video) => video !== player;
            const pauseVideo = (video) => video.pauseVideo();
            players.filter(otherVideos).forEach(pauseVideo);
        }
        const playerVars = player.b.b.playerVars;
        if (playerVars.loop && event.data === YT.PlayerState.ENDED) {
            player.seekTo(playerVars.start);
        }
    }

    function addVideo(video, desiredPlayerVars) {
        const videoId = video.getAttribute("data-id");
        const defaultPlayerVars = {
            autoplay: 1,
            controls: 1,
            showinfo: 1,
            rel: 0,
            iv_load_policy: 3,
            cc_load_policy: 0,
            fs: 0,
            disablekb: 1
        };
        const playerVars = Object.assign(defaultPlayerVars, desiredPlayerVars);
        players.push(new YT.Player(video, {
            width: 200,
            height: 200,
            videoId: videoId,
            // defaultPlayerVars,
            playerVars,
            events: {
                "onReady": onPlayerReady,
                "onStateChange": onPlayerStateChange
            }
        }));
    }
    let apiIsReady = false;
    let timer;
    window.onYouTubePlayerAPIReady = function() {
        apiIsReady = true;
    };
    function init(opts) {
        loadPlayer();
        timer = setInterval(function checkAPIReady() {
            if (apiIsReady) {
                timer = clearInterval(timer);
                addVideo(opts.video, opts.playerVars || {});
            }
        }, 100);
    }
    return {
        init
    };
}());
(function iife() {
    "use strict";
    const show = (el) => el.classList.remove("hide");

    function coverClickHandler(evt) {
        const wrapper = evt.currentTarget.nextElementSibling;
        show(wrapper);
        videoPlayer.init({
            video: wrapper.querySelector(".video"),
            playerVars: {
                start: 900,
                end: 1200
            }
        });
    }
    const cover = document.querySelector(".playa");
    cover.addEventListener("click", coverClickHandler);
}());
(function iife() {
    "use strict";
    const show = (el) => el.classList.remove("hide");

    function coverClickHandler(evt) {
        const wrapper = evt.currentTarget.nextElementSibling;
        show(wrapper);
        videoPlayer.init({
            video: wrapper.querySelector(".video"),
            playerVars: {
                start: 30,
                end: 50
            }
        });
    }
    const cover = document.querySelector(".playb");
    cover.addEventListener("click", coverClickHandler);
}());
(function iife() {
    "use strict";
    const show = (el) => el.classList.remove("hide");

    function coverClickHandler(evt) {
        const wrapper = evt.currentTarget.nextElementSibling;
        show(wrapper);
        videoPlayer.init({
            video: wrapper.querySelector(".video"),
            playerVars: {
                start: 30,
                end: 50
            }
        });
    }
    const cover = document.querySelector(".playc");
    cover.addEventListener("click", coverClickHandler);
}());
(function iife() {
    "use strict";
    const show = (el) => el.classList.remove("hide");

    function coverClickHandler(evt) {
        const wrapper = evt.currentTarget.nextElementSibling;
        show(wrapper);
        videoPlayer.init({
            video: wrapper.querySelector(".video"),
            playerVars: {
                start: 30,
                end: 50
            }
        });
    }
    const cover = document.querySelector(".playd");
    cover.addEventListener("click", coverClickHandler);
}());
(function iife() {
    "use strict";
    const show = (el) => el.classList.remove("hide");

    function coverClickHandler(evt) {
        const wrapper = evt.currentTarget.nextElementSibling;
        show(wrapper);
        videoPlayer.init({
            video: wrapper.querySelector(".video"),
            playerVars: {
                start: 30,
                end: 50
            }
        });
    }
    const cover = document.querySelector(".playe");
    cover.addEventListener("click", coverClickHandler);
}());
(function iife() {
    "use strict";
    const show = (el) => el.classList.remove("hide");

    function coverClickHandler(evt) {
        const wrapper = evt.currentTarget.nextElementSibling;
        show(wrapper);
        videoPlayer.init({
            video: wrapper.querySelector(".video"),
            playerVars: {
                start: 30,
                end: 50
            }
        });
    }
    const cover = document.querySelector(".playf");
    cover.addEventListener("click", coverClickHandler);
}());
(function iife() {
    "use strict";
    const show = (el) => el.classList.remove("hide");

    function coverClickHandler(evt) {
        const wrapper = evt.currentTarget.nextElementSibling;
        show(wrapper);
        videoPlayer.init({
            video: wrapper.querySelector(".video"),
            playerVars: {
                start: 30,
                end: 50
            }
        });
    }
    const cover = document.querySelector(".playg");
    cover.addEventListener("click", coverClickHandler);
}());
(function iife() {
    "use strict";
    const show = (el) => el.classList.remove("hide");

    function coverClickHandler(evt) {
        const wrapper = evt.currentTarget.nextElementSibling;
        show(wrapper);
        videoPlayer.init({
            video: wrapper.querySelector(".video"),
            playerVars: {
                start: 30,
                end: 50
            }
        });
    }
    const cover = document.querySelector(".playh");
    cover.addEventListener("click", coverClickHandler);
}());
(function iife() {
    "use strict";
    const show = (el) => el.classList.remove("hide");

    function coverClickHandler(evt) {
        const wrapper = evt.currentTarget.nextElementSibling;
        show(wrapper);
        videoPlayer.init({
            video: wrapper.querySelector(".video"),
            playerVars: {
                start: 30,
                end: 50
            }
        });
    }
    const cover = document.querySelector(".playi");
    cover.addEventListener("click", coverClickHandler);
}());

Answer 1

您可以通过在构造函数中调用装载程序来实现。

loadPlayer();
function init(opts) {
  addVideo(opts.video, opts.playerVars || {});
}

jsfiddle

编辑：

您可以检查并查看api是否准备就绪，然后以其他方式明智地调用加载程序函数，并将opts参数附加到数组中。然后在您的onYouTubePlayerAPIReady被解雇后，使用您的参数数组调用init函数：

您的初始化功能

function init(opts) {
    loadPlayer();
    if (apiIsReady) {
      addVideo(opts.video, opts.playerVars || {});
    }
    else
    {
      waitting_inits.push(opts)
    }
}

您的回叫功能

window.onYouTubePlayerAPIReady = function() {
  apiIsReady = true;
  load_all_waitting_inits()
};


var waitting_inits=[];
function load_all_waitting_inits()
{
    for(var opts of waitting_inits)
  {
    init(opts);
  }
}

和Here正在使用jsfiddle。

新编辑：

Here是没有浏览器冻结问题的jsffiddel。

Answer 2

像这样？

var opts={video:null,playerVars:null}
function init(options){
    opts=options
}
window.onYouTubePlayerAPIReady = function() {
    addVideo(opts.video||{}, opts.playerVars||{});
}

我希望这会有所帮助！

删除setInterval

2 个答案: