在代码中使用 setTimeout 一次而不是两次

Question

这组代码用了两次：

setTimeout(function () 
}, 621);

用于防止在视频准备好播放之前点击封面。

可以在代码中使用一次而不是两次吗？

这就是我想要做的。

我想知道我是否可以在代码中使用一次setTimeout。

代码：https://jsfiddle.net/efjwn8qd/

setTimeout(function () {
  const manageCover = (function makeManageCover() {

    function show(el) {
      el.classList.remove("hide");
    }

    function showCover(playButton) {
      const cover = playButton.parentElement;
      cover.classList.add("active");
      show(cover);
    }

    function coverClickHandler(evt) {
      const cover = evt.currentTarget;
      showCover(cover);
    }

    const playButton = document.querySelector(".playa");
    playButton.addEventListener("click", coverClickHandler);
  }());
}, 621);

const videoPlayer = (function makeVideoPlayer() {

  let player = null;

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

  function shufflePlaylist(player) {
    player.setShuffle(true);
    player.playVideoAt(0);
    player.stopVideo();
  }

  function onPlayerReady(event) {
    player = event.target;
    player.setVolume(0);
    shufflePlaylist(player);
  }

  function addPlayer(video) {

    const playlist = "2VwsvrPFr9w";

    const config = {
      height: 360,
      host: "https://www.youtube-nocookie.com",
      width: 640
    };
    config.playerVars = {
      cc_load_policy: 0,
      controls: 1,
      disablekb: 1,
      fs: 0,
      iv_load_policy: 3,
      loop: 1,
      playlist,
      rel: 0
    };
    config.events = {
      "onReady": onPlayerReady
    };
    player = new YT.Player(video, config);

  }

  function play() {
    player.playVideo();
  }
  return {
    addPlayer,
    play
  };
}());

function onYouTubeIframeAPIReady() {
  const cover = document.querySelector(".playa");
  const wrapper = cover.parentElement;
  const frameContainer = wrapper.querySelector(".video");
  videoPlayer.addPlayer(frameContainer);
}
setTimeout(function () {
  (function iife() {
    "use strict";

    function coverClickHandler() {
      videoPlayer.play();
    }

    const cover = document.querySelector(".playa");
    cover.addEventListener("click", coverClickHandler);
  }());
}, 621);

Answer 1

无论如何，我认为使用 setTimeout 不是一个好主意，因为不确定 StateReady.

需要多少时间

你应该依靠播放器状态或事件触发来控制UI状态。

方案一：忽略playButton的点击事件，直到playstate准备好（可以通过api=[获取播放状态=17=]).

解决方案 2: hide/disable playbutton 最初，然后 show/enable 它直到 onPlayerReady 被触发。即使您可以轻松更改代码以自动移除一次封面 onPlayerReady 而无需单击 playButton。

更新代码 jsitor fiddle

function show(el) {
  el.classList.remove("hide");
}

function showCover(playButton) {
  const cover = playButton.parentElement;
  cover.classList.add("active");
  show(cover);
}

function coverClickHandler(evt) { // solution 1: ignore click event until playstate is ready
  if (ytPlayer && ytPlayer.getPlayerState && ytPlayer.getPlayerState() === 5) {
    const cover = evt.currentTarget;
    showCover(cover);
  } else {
    console.log('state:', ytPlayer && ytPlayer.getPlayerState && ytPlayer.getPlayerState())
  }
}

const playButton = document.querySelector(".playa");
playButton.addEventListener("click", coverClickHandler);

let ytPlayer = null
const videoPlayer = (function makeVideoPlayer() {

  let player = null;
  // playButton.classList.add('hide') // solution 2: hide/disable the play button first
  const tag = document.createElement("script");
  tag.src = "https://www.youtube.com/iframe_api";
  const firstScriptTag = document.getElementsByTagName("script")[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

  function shufflePlaylist(player) {
    player.setShuffle(true);
    player.playVideoAt(0);
    player.stopVideo();
  }

  function onPlayerReady(event) {
    player = event.target;
    player.setVolume(70);
    shufflePlaylist(player);
    // playButton.classList.remove('hide'); // solution 2: show/enable the play button once ready
  }

  function addPlayer(video) {

    const playlist = "2VwsvrPFr9w";

    const config = {
      height: 360,
      host: "https://www.youtube-nocookie.com",
      width: 640
    };
    config.playerVars = {
      cc_load_policy: 0,
      controls: 1,
      disablekb: 1,
      fs: 0,
      iv_load_policy: 3,
      loop: 1,
      playlist,
      rel: 0
    };
    config.events = {
      "onReady": onPlayerReady,
      "onStateChange": function (ev) {
        ev.data === 1 && console.log('onStateChange', 'playing', ev)
        ev.data === 2 && console.log('onStateChange', 'pause', ev)
      }
    };
    player = new YT.Player(video, config);
    return player
  }

  function play() {
    player && player.playVideo && player.playVideo()
  }
  return {
    addPlayer,
    play
  };
}());

function onYouTubeIframeAPIReady() {
  const cover = document.querySelector(".playa");
  const wrapper = cover.parentElement;
  const frameContainer = wrapper.querySelector(".video");
  ytPlayer = videoPlayer.addPlayer(frameContainer);
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  background: #353198;
  animation: fade 2s ease 0s forwards;
}
@keyframes fade {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.outer {
  display: flex;
  min-height: 100%;
  box-sizing: border-box;
  justify-content: center;
}
.container {
  display: flex;
  justify-content: center;
}
.container.active {
  flex: 1 0 0;
  animation: fadebody 5s ease 0s forwards;
  background-size: 165px 165px;
  background-image: linear-gradient(teal 5px, #0000 5px),
    linear-gradient(90deg, teal 5px, #0000 5px),
    linear-gradient(black 10px, #0000 10px 160px, black 160px),
    linear-gradient(90deg, black 10px, #0000 10px 160px, black 160px),
    linear-gradient(orange 15px, #0000 15px 155px, orange 155px),
    linear-gradient(90deg, orange 15px, #0000 15px 155px, orange 155px),
    linear-gradient(black 20px, #0000 20px 150px, black 150px),
    linear-gradient(90deg, black 20px, #0000 20px 150px, black 150px),
    linear-gradient(teal 25px, #0000 25px 145px, teal 145px),
    linear-gradient(90deg, teal 25px, #0000 25px 145px, teal 145px),
    linear-gradient(black 30px, #0000 30px 140px, black 140px),
    linear-gradient(90deg, black 30px, #0000 30px 140px, black 140px),
    linear-gradient(orange 35px, #0000 35px 135px, orange 135px),
    linear-gradient(90deg, orange 35px, #0000 35px 135px, orange 135px),
    linear-gradient(black 40px, #0000 40px 130px, black 130px),
    linear-gradient(90deg, black 40px, #0000 40px 130px, black 130px),
    linear-gradient(teal 45px, #0000 45px 125px, teal 125px),
    linear-gradient(90deg, teal 45px, #0000 45px 125px, teal 125px),
    linear-gradient(black 50px, #0000 50px 120px, black 120px),
    linear-gradient(90deg, black 50px, #0000 50px 120px, black 120px),
    linear-gradient(orange 55px, #0000 55px 115px, orange 115px),
    linear-gradient(90deg, orange 55px, #0000 55px 115px, orange 115px),
    linear-gradient(black 60px, #0000 60px 110px, black 110px),
    linear-gradient(90deg, black 60px, #0000 60px 110px, black 110px),
    linear-gradient(teal 65px, #0000 65px 105px, teal 105px),
    linear-gradient(90deg, teal 65px, #0000 65px 105px, teal 105px),
    linear-gradient(black 70px, #0000 70px 100px, black 100px),
    linear-gradient(90deg, black 70px, #0000 70px 100px, black 100px),
    linear-gradient(orange 75px, #0000 75px 95px, orange 95px),
    linear-gradient(90deg, orange 75px, #0000 75px 95px, orange 95px),
    linear-gradient(black 80px, #0000 80px 90px, black 90px),
    linear-gradient(90deg, black 80px, #0000 80px 90px, black 90px),
    linear-gradient(teal, teal);
}
/* when container is active hide the svg */
.container.active .thePlay {
  display: none;
}

.inner-container {
  display: none;
}
/* when container is active hide the svg and show the inner container*/
.container.active .thePlay {
  display: none;
}
.container.active .inner-container {
  display: flex;
}
.container.active .inner-container.curtain {
  display: block;
}

@keyframes fadebody {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.playa,
.playb {
  margin: auto 20px;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  cursor: pointer;
  flex-shrink: 0;
}

.playa {
  fill: red;
  filter: drop-shadow(3px 3px 3px rgba(0, 0, 0, 0.7));
}

.playb {
  fill: blue;
  filter: drop-shadow(3px 3px 3px rgba(0, 0, 0, 0.7));
}

.curtain {
  position: relative;
  max-width: 640px;
  margin: auto;
  flex: 1 0 0%;
}
.panel-left,
.panel-right {
  position: absolute;
  height: 100%;
  width: calc(50% + 1px); /* rounding error fix */
  top: 0%;
  transition: all ease 10s;

  /*background-image: url("https://picsum.photos/600");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;*/
  overflow: hidden;
}

.panel-left {
  left: 0;
  /*background-color: rgb(91, 96, 106);*/
}

.panel-right {
  right: 0;
  /*background-color: rgb(229, 211, 211);*/
}

.panel-left::before,
.panel-right::before {
  content: "";
  position: absolute;
  height: 100%;
  width: 200%;
  top: 0;
  left: 0;
  background-image: url("https://picsum.photos/id/26/1920/1080");
  background-size: auto;
  background-repeat: no-repeat;
  background-position: 0 0;
}
.curtain2 .panel-left::before,
.curtain2 .panel-right::before {
  background-image: url("https://picsum.photos/id/27/1920/1080");
}

.panel-right::before {
  left: -100%;
}

.container.active .curtain .panel-left {
  animation: curtain1 8s forwards;
  animation-delay: 1s;
}

@keyframes curtain1 {
  to {
    transform: translateX(-100%);
  }
}

.container.active .curtain .panel-right {
  animation: curtain 8s forwards;
  animation-delay: 1s;
}

@keyframes curtain {
  to {
    transform: translateX(100%);
  }
}

.ratio-keeper {
  position: relative;
  height: 0;
  padding-top: 56.25%;
  border-radius: 25px;
  margin: auto;
  overflow: hidden;
}

.video-frame {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.hide {
  display: none;
}

<div class="outer">
    <div class="container with-curtain">
        <svg class="playa thePlay" width="100%" height="100%" viewBox="0 0 64 64">
            <path d="M25.6,46.4L44.8,32L25.6,17.6V46.4z M32,0C14.3,0,0,14.3,0,32s14.3,32,32,32s32-14.3,32-32S49.7,0,32,0z
      M32,57.6C17.9,57.6,6.4,46.1,6.4,32S17.9,6.4,32,6.4S57.6,17.9,57.6,32S46.1,57.6,32,57.6z" />
        </svg>
        <div class="inner-container curtain curtain1">
            <div class="ratio-keeper">
                <div class="wrapa">
                    <div class="video video-frame" data-id="qe5WF4qCSkQ"></div>
                </div>
                <div class="panel-left"></div>
                <div class="panel-right"></div>
            </div>
        </div>
    </div>
</div>

Answer 2

我转到 jsFiddle，剪切第一个 setTimeout 调用并将其粘贴到最后一个 setTimeout 调用中，如下所示：

setTimeout(function () {
    const manageCover = (function makeManageCover() {

    function show(el) {
      el.classList.remove("hide");
    }

    function showCover(playButton) {
      const cover = playButton.parentElement;
      cover.classList.add("active");
      show(cover);
    }

    function coverClickHandler(evt) {
      const cover = evt.currentTarget;
      showCover(cover);
    }

    const playButton = document.querySelector(".playa");
    playButton.addEventListener("click", coverClickHandler);
  }());
  (function iife() {
    "use strict";

    function coverClickHandler() {
      videoPlayer.play();
    }

    const cover = document.querySelector(".playa");
    cover.addEventListener("click", coverClickHandler);
  }());
}, 621);

它似乎没有任何问题。

在代码中使用 setTimeout 一次而不是两次

Using setTimeout one time in the code instead of twice

javascript

settimeout