gpt4 book ai didi

javascript - 处理程序被多次调用

转载 作者:行者123 更新时间:2023-12-04 13:05:45 24 4
gpt4 key购买 nike

在代码中,处理程序被多次调用。

它应该只被调用一次。

代码中是如何修复的,需要调整什么?

jsfiddle 内的 console 中,它说,1, 3, 6, 10, 15

单击退出按钮一次得到 1

第二次给出,3

第三次:6

第4次:10

第5次:15

这些数字应该是。

1, 2, 3, 4, 5

点击退出按钮后。 https://jsfiddle.net/yb0tn7p9/

  function createResetHandler(player) {
const resetVideos = document.querySelectorAll('.exit');
resetVideos.forEach(function resetVideoHandler(video) {
video.addEventListener('click', function resetVideoHandler() {
player.destroy();
console.log('hit')
}
);
}
)
}

要重现:首先单击播放 svgs,然后多次单击 X

点击 X

enter image description here

然后数字出现在 jsfiddle 的控制台中。

enter image description here

const manageUI = (function makeManageUI() {

function resetBackground(backgroundSelector) {
const allBackgrounds = document.querySelectorAll(backgroundSelector);

function showBackground(background) {
background.classList.remove("bg1");
}
allBackgrounds.forEach(showBackground);
}

function resetCurtains(curtainSelector) {
const allCurtains = document.querySelectorAll(curtainSelector);

function showCurtain(curtain) {
curtain.classList.remove("active");
}
allCurtains.forEach(showCurtain);
}

function showAllButtons(buttonSelector) {
const allButtons = document.querySelectorAll(buttonSelector);

function showButton(button) {
button.classList.remove("hide");
}
allButtons.forEach(showButton);
}

function resetButtons(buttonSelector) {
const allButtons = document.querySelectorAll(buttonSelector);

function showButton(button) {
button.classList.remove("isOpen");
}
allButtons.forEach(showButton);
}

function resetPage() {
resetBackground("body");
resetCurtains(".with-curtain");
showAllButtons(".container.hide");
resetButtons(".outer");
}

function hideCurtains(exitButtons) {
const container = exitButtons.closest(".inner-container");
const curtains = container.querySelector(".sliding-panels");
curtains.classList.add("hide");
}

function exitClickHandler(evt) {
resetPage();
hideCurtains(evt.currentTarget);
}

function addClickToExit(exitButtons) {
exitButtons.forEach(function addExitButtonHandler(exitButtons) {
exitButtons.addEventListener("click", exitClickHandler);
});
}

function init() {
const exitButtons = document.querySelectorAll(".exit");
addClickToExit(exitButtons);
}

return {
init
};
}());

const manageCover = (function makeManageCover() {
const config = {};

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

function hide(el) {
el.classList.add("hide");
}

function hideAll(elements) {
elements.forEach(hide);
}

function resetBackground(backgroundSelector) {
const allBackgrounds = document.querySelectorAll(backgroundSelector);

function hideBackground(background) {
background.classList.add("bg1");
}
allBackgrounds.forEach(hideBackground);
}

function resetButtons(buttonSelector) {
const allButtons = document.querySelectorAll(buttonSelector);

function hideButton(button) {
button.classList.add("isOpen");
}
allButtons.forEach(hideButton);
}

function resetPage() {
resetBackground("body");
resetButtons(".outer");
}

function markAsPlayed(played) {
played.classList.add("played");
}

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

function coverClickHandler(evt) {
hideAll(config.containers);
resetPage();
markAsPlayed(evt.currentTarget);
const cover = evt.currentTarget;
showCovers(cover);
}

function addClickToButtons(playButtons) {
playButtons.forEach(function playButtonHandler(playButton) {
playButton.addEventListener("click", coverClickHandler);
});
}

function addCoverHandler(coverSelector, handler) {
const cover = document.querySelector(coverSelector);
cover.addEventListener("click", handler);
}

function init(selectors) {
config.containers = document.querySelectorAll(selectors.container);
const playButtons = document.querySelectorAll(selectors.playButton);
addClickToButtons(playButtons);
}

return {
addCoverHandler,
init
};
}());

function combinePlayerOptions(options1 = {}, options2 = {}) {
const combined = Object.assign({}, options1, options2);
Object.keys(options1).forEach(function checkObjects(prop) {
if (typeof options1[prop] === "object") {
combined[prop] = Object.assign({}, options1[prop], options2[prop]);
}
});
return combined;
}

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

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 createResetHandler(player) {
const resetVideos = document.querySelectorAll('.exit');
resetVideos.forEach(function resetVideoHandler(video) {
video.addEventListener('click', function resetVideoHandler() {
player.destroy();
console.log('hit')
}
);
}
)
}

function onPlayerReady(event) {
const player = event.target;
player.setVolume(100);
createResetHandler(player);
}

function addPlayer(video, settings) {
const defaults = {
height: 360,
host: "https://www.youtube-nocookie.com",
videoId: video.dataset.id,
width: 640
};
defaults.events = {
"onReady": onPlayerReady
};

const playerOptions = combinePlayerOptions(defaults, settings);
const player = new YT.Player(video, playerOptions);
players.push(player);
return player;
}

return {
addPlayer
};
}());

const managePlayer = (function makeManagePlayer() {
const defaults = {
playerVars: {
autoplay: 1,
controls: 1,
disablekb: 1,
enablejsapi: 1,
fs: 0,
iv_load_policy: 3
}
};

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

function createPlayer(videoWrapper, settings = {}) {
const video = videoWrapper.querySelector(".video");
const playerOptions = combinePlayerOptions(defaults, settings);
return videoPlayer.addPlayer(video, playerOptions);
}

function createCoverClickHandler(playerOptions) {
return function coverClickHandler(evt) {
const cover = evt.currentTarget;
const wrapper = cover.nextElementSibling;
show(wrapper);
const player = createPlayer(wrapper, playerOptions);
wrapper.player = player;
};
}

function addPlayer(coverSelector, playerOptions) {
const clickHandler = createCoverClickHandler(playerOptions);
manageCover.addCoverHandler(coverSelector, clickHandler);
}

return {
add: addPlayer
};

}());

function onYouTubeIframeAPIReady() {

managePlayer.add(".playa", {});
managePlayer.add(".playb", {});
managePlayer.add(".playc", {});
managePlayer.add(".playd", {});
managePlayer.add(".playe", {
playerVars: {
playlist: "0dgNc5S8cLI,mnfmQe8Mv1g,-Xgi_way56U,CHahce95B1g"
}
});
managePlayer.add(".playe", {});
managePlayer.add(".playf", {});
managePlayer.add(".playg", {});
managePlayer.add(".playh", {});
managePlayer.add(".playi", {});

manageCover.init({
container: ".container",
playButton: ".thePlay"
});

manageUI.init({});
}
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;
flex-wrap: wrap;
min-height: 100%;
width: 290px;
box-sizing: border-box;
justify-content: center;
align-content: center;
margin: auto;
gap: 10px;
}

.outer.isOpen {
display: flex;
width: auto;
align-content: stretch;
}

.container {
display: flex;
justify-content: center;
position: relative;
/*z-index: 2;*/
}

.container.active {
flex: 1 0 0;
}


.thePlay:hover {
box-shadow: 0 0 0 5px rgba(43, 179, 20, 0.5);
}

.thePlay:focus {
outline: 0;
box-shadow: 0 0 0 5px rgba(0, 255, 255, 0.5);
}

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

.thePlay {

width: 90px;
height: 90px;
border-radius: 50%;
cursor: pointer;
border: none;
fill: blue;
background: transparent;
padding: 0;
filter: drop-shadow(3px 3px 3px rgba(0, 0, 0, 0.7));
}

.played {
fill: green;
}



button.thePlay {
pointer-events: none;
}

.exit {
position: absolute;
top: auto;
bottom: -47.63px;
margin: auto;
right: 0;
left: 0;
width: 47.63px;
height: 47.63px;
cursor: pointer;
border: none;
background: transparent;
fill: red;
padding: 0;
}

.exitsvg {
fill: none;
fill-rule: evenodd;
stroke: #ff0000;
stroke-width: 17.80202103;
stroke-linecap: butt;
stroke-linejoin: miter;
stroke-miterlimit: 4;
stroke-dasharray: none;
stroke-opacity: 1;
border: 4.625px solid #4e4e4e;
border-radius: 100%;
}

.curtain {
position: relative;
max-width: 642px;
margin: auto;
flex: 1 0 0%;
background: #0a0a0a;
border: 20px solid #000;
border-radius: 3.2px;
border-color: #000 #101010 #000 #101010;
}

.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("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'> <filter id='filter'> <feTurbulence baseFrequency='0.01 0.0001' numOctaves='5'/> <feColorMatrix values='1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1'/></filter> <rect width='100%' height='100%' filter='url(%23filter)'/> </svg>");
background-size: auto;
background-repeat: no-repeat;
background-position: 0 0;
}

.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: curtain2 8s forwards;
animation-delay: 1s;
}

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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


.ratio-keeper {
position: relative;
height: 0;
padding-top: 56.25%;

margin: auto;
overflow: hidden;
border: 1px solid #333;
}

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

.hide {
display: none;
}
<div class="outer">
<div class="container with-curtain">
<button class="playa thePlay" type="button" aria-label="Open">
<svg width="100%" height="100%" viewBox="0 0 64 64">
<g id="play">
<title>Play</title>
<circle cx="32" cy="32" r="32" fill="transparent" pointer-events="visiblePainted" />
<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" />
</g>
</svg>
</button>
<div class="inner-container curtain curtain1">
<div class="ratio-keeper">
<div class="wrapa">
<div class="video video-frame" data-id="CHahce95B1g"></div>
</div>
<div class="sliding-panels">
<div class="panel-left"></div>
<div class="panel-right"></div>
</div>
</div>
<button class="exit" type="button" aria-label="Close">
<svg class="exitsvg" width="38.39" height="38.39" viewBox="0 0 100 100">
<g id="exit">
<title>exit</title>
<path d="M 6.3895625,6.4195626 C 93.580437,93.610437 93.580437,93.610437 93.580437,93.610437" />
<path d="M 6.3894001,93.6106 C 93.830213,6.4194003 93.830213,6.4194003 93.830213,6.4194003" />
</g>
</svg>
</button>
</div>
</div>
<div class="container play2 with-curtain">
<button class="playb thePlay" type="button" aria-label="Open">
<svg width="100%" height="100%" viewBox="0 0 64 64">
<use href="#play" />
</svg>
</button>
<div class="inner-container curtain curtain2">
<div class="ratio-keeper">
<div class="wrapa">
<div class="video video-frame" data-id="-Xgi_way56U"></div>
</div>
<div class="sliding-panels">
<div class="panel-left"></div>
<div class="panel-right"></div>
</div>
</div>
<button class="exit" type="button" aria-label="Close">
<svg class="exitsvg" width="38.39" height="38.39" viewBox="0 0 100 100">
<use href="#exit" />
</svg>
</button>
</div>
</div>
<div class="container play3 with-curtain">
<button class="playc thePlay" type="button" aria-label="Open">
<svg width="100%" height="100%" viewBox="0 0 64 64">
<use href="#play" />
</svg>
</button>
<div class="inner-container curtain curtain3">
<div class="ratio-keeper">
<div class="wrapa">
<div class="video video-frame" data-id="-Xgi_way56U"></div>
</div>
<div class="sliding-panels">
<div class="panel-left"></div>
<div class="panel-right"></div>
</div>
</div>
<button class="exit" type="button" aria-label="Close">
<svg class="exitsvg" width="38.39" height="38.39" viewBox="0 0 100 100">
<use href="#exit" />
</svg>
</button>
</div>
</div>
<div class="container play4 with-curtain">
<button class="playd thePlay" type="button" aria-label="Open">
<svg width="100%" height="100%" viewBox="0 0 64 64">
<use href="#play" />
</svg>
</button>
<div class="inner-container curtain curtain4">
<div class="ratio-keeper">
<div class="wrapa">
<div class="video video-frame" data-id="-Xgi_way56U"></div>
</div>
<div class="sliding-panels">
<div class="panel-left"></div>
<div class="panel-right"></div>
</div>
</div>
<button class="exit" type="button" aria-label="Close">
<svg class="exitsvg" width="38.39" height="38.39" viewBox="0 0 100 100">
<use href="#exit" />
</svg>
</button>
</div>
</div>
<div class="container play5 with-curtain">
<button class="playe thePlay" type="button" aria-label="Open">
<svg width="100%" height="100%" viewBox="0 0 64 64">
<use href="#play" />
</svg>
</button>
<div class="inner-container curtain curtain5">
<div class="ratio-keeper">
<div class="wrapa">
<div class="video video-frame"></div>
</div>
<div class="sliding-panels">
<div class="panel-left"></div>
<div class="panel-right"></div>
</div>
</div>
<button class="exit" type="button" aria-label="Close">
<svg class="exitsvg" width="38.39" height="38.39" viewBox="0 0 100 100">
<use href="#exit" />
</svg>
</button>
</div>
</div>
<div class="container play6 with-curtain">
<button class="playf thePlay" type="button" aria-label="Open">
<svg width="100%" height="100%" viewBox="0 0 64 64">
<use href="#play" />
</svg>
</button>
<div class="inner-container curtain curtain6">
<div class="ratio-keeper">
<div class="wrapa">
<div class="video video-frame" data-id="-Xgi_way56U"></div>
</div>
<div class="sliding-panels">
<div class="panel-left"></div>
<div class="panel-right"></div>
</div>
</div>
<button class="exit" type="button" aria-label="Close">
<svg class="exitsvg" width="38.39" height="38.39" viewBox="0 0 100 100">
<use href="#exit" />
</svg>
</button>
</div>
</div>
<div class="container play7 with-curtain">
<button class="playg thePlay" type="button" aria-label="Open">
<svg width="100%" height="100%" viewBox="0 0 64 64">
<use href="#play" />
</svg>
</button>
<div class="inner-container curtain curtain7">
<div class="ratio-keeper">
<div class="wrapa">
<div class="video video-frame" data-id="-Xgi_way56U"></div>
</div>
<div class="sliding-panels">
<div class="panel-left"></div>
<div class="panel-right"></div>
</div>
</div>
<button class="exit" type="button" aria-label="Close">
<svg class="exitsvg" width="38.39" height="38.39" viewBox="0 0 100 100">
<use href="#exit" />
</svg>
</button>
</div>
</div>
<div class="container play8 with-curtain">
<button class="playh thePlay" type="button" aria-label="Open">
<svg width="100%" height="100%" viewBox="0 0 64 64">
<use href="#play" />
</svg>
</button>
<div class="inner-container curtain curtain8">
<div class="ratio-keeper">
<div class="wrapa">
<div class="video video-frame" data-id="-Xgi_way56U"></div>
</div>
<div class="sliding-panels">
<div class="panel-left"></div>
<div class="panel-right"></div>
</div>
</div>
<button class="exit" type="button" aria-label="Close">
<svg class="exitsvg" width="38.39" height="38.39" viewBox="0 0 100 100">
<use href="#exit" />
</svg>
</button>
</div>
</div>
<div class="container play9 with-curtain">
<button class="playi thePlay" type="button" aria-label="Open">
<svg width="100%" height="100%" viewBox="0 0 64 64">
<use href="#play" />
</svg>
</button>
<div class="inner-container curtain curtain9">
<div class="ratio-keeper">
<div class="wrapa">
<div class="video video-frame" data-id="-Xgi_way56U"></div>
</div>
<div class="sliding-panels">
<div class="panel-left"></div>
<div class="panel-right"></div>
</div>
</div>
<button class="exit" type="button" aria-label="Close">
<svg class="exitsvg" width="38.39" height="38.39" viewBox="0 0 100 100">
<use href="#exit" />
</svg>
</button>
</div>
</div>
</div>

最佳答案

每次调用 createResetHandler 函数时,它都会为所有按钮分配一个新的事件监听器。

同样在 createResetHandler 函数中,播放器参数应该用于创建相关按钮的事件监听器,而不是所有按钮。

只需删除createResetHandler 函数并将以下代码放入makeVideoPlayer 函数

  document.querySelectorAll(".exit").forEach((button) => {
button.onclick = (e) => {
const _iframe = e.currentTarget.parentElement.querySelector("iframe");
// check if the video exists
if (_iframe) {
// find its player and destroy it
for (let i = 0, playersCount = players.length; i < playersCount; i++) {
const player = players[i];
if (player.h === _iframe) {
player.destroy();
console.log("hit");
break;
}
}
}
};
});

关于javascript - 处理程序被多次调用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/69545719/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com