You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

能否将控制视频封面点击的两次setTimeout调用合并为单次?

合并setTimeout调用方案

完全可以将两次延迟参数相同的setTimeout调用合并为单次调用,修改后原有功能不受任何影响,还能减少代码冗余。

合并逻辑说明

  • 两次setTimeout的延迟时长均为621ms,执行时机完全一致
  • 两个回调内的逻辑分别是绑定封面切换事件、绑定视频播放事件,没有依赖冲突,直接放到同一个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);

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);
}

内容的提问来源于stack exchange,提问作者user16776772

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.10.05 06:09:03