能否将控制视频封面点击的两次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
相关产品推荐
相关产品推荐

