clearTimeout 仅适用于 SVG 的页面重新加载 JavaScript

Question

我写了这点JS，试图让setTimout使用"clearTimeout"在点击时清除。我面临的问题是它仅在第一次刷新后有效。应该发生的是代码应该清除超时，因此年份将在导航中停止进行。 函数"addtoev"包含应停止代码的函数。

我这里有一个指向我的代码笔的链接：

https://codepen.io/paula_athena/pen/MGrGyy

我的JS一团糟，因为我真的不知道如何编码，但我希望我至少可以超时来清除

var year2002;
var year2003;
var year2005;
var year2007;
var year2009;
var year2011;
var year2013;
var year2015;
var year2017;

document.addEventListener("DOMContentLoaded", function autoPlay() {

window.addEventListener("load",function() {   addtoev(); });

function addtoev() {
var bns = document.getElementsByClassName("cls-10");for (i = 0; i < 
bns.length; i++) {

bns[i].addEventListener("click", function(event) {

clearTimeout(year2002);
clearTimeout(year2003);
clearTimeout(year2005);
clearTimeout(year2007);
clearTimeout(year2009);
clearTimeout(year2011);
clearTimeout(year2013);
clearTimeout(year2015);
clearTimeout(year2017);

// alert("This element was clicked.");
});   } }


year2002 = window.setTimeout(function(){
$("#_2002").removeClass("hidden");  
$("#_2002 rect").addClass("color_change");   
$("#rect_02").addClass("blue_selected");   
$('#2002 text').addClass("text_wht");    
$('#asterisks_02').removeClass("hidden");

}, 1000);

year2003 = window.setTimeout(function()   {
$("#_2003").removeClass("hidden");
$("#_2003 rect").addClass("color_change");
$("#_2002 rect").removeClass("color_change");
$("#rect_02").removeClass("blue_selected");
$("#rect_03").addClass("blue_selected");
$('#2003 text').addClass("text_wht");
$('#2002 text').removeClass("text_wht");
$('#asterisks_03').removeClass("hidden");
$('#asterisks_02').addClass("hidden");

}, 3000);

year2005 = window.setTimeout(function()
{
$("#_2005").removeClass("hidden");
$("#_2005 rect").addClass("color_change");
$("#_2003 rect").removeClass("color_change");
$("#rect_03").removeClass("blue_selected");
$("#rect_05").addClass("blue_selected");
$('#2005 text').addClass("text_wht");
$('#2003 text').removeClass("text_wht");
$('#asterisks_05').removeClass("hidden");
$('#asterisks_03').addClass("hidden");

}, 5000);
year2007 = window.setTimeout(function()
{
$("#_2007").removeClass("hidden");
$("#_2007 rect").addClass("color_change");
$("#_2005 rect").removeClass("color_change");
$("#rect_05").removeClass("blue_selected");
$("#rect_07").addClass("blue_selected");
$('#2007 text').addClass("text_wht");
$('#2005 text').removeClass("text_wht");
$('#asterisks_05').addClass("hidden");
}, 7000);

year2009 = window.setTimeout(function(){
$("#_2009").removeClass("hidden");   
$("#_2009 rect").addClass("color_change");   
$("#_2007 rect").removeClass("color_change");   
$("#rect_07").removeClass("blue_selected");   
$("#rect_09").addClass("blue_selected");   
$('#2009 text').addClass("text_wht");   
$('#2007 text').removeClass("text_wht");    
$('#asterisks_09').removeClass("hidden");
}, 9000);

year2011 = window.setTimeout(function()   {
$("#_2011").removeClass("hidden");
$("#_2011 rect").addClass("color_change");
$("#_2009 rect").removeClass("color_change");
$("#rect_09").removeClass("blue_selected");
$("#rect_11").addClass("blue_selected");
$('#2011 text').addClass("text_wht");
$('#2009 text').removeClass("text_wht");
$('#asterisks_11').removeClass("hidden");
$('#asterisks_09').addClass("hidden");
}, 11000);

year2013 = window.setTimeout(function()
{
$("#_2013").removeClass("hidden");
$("#_2013 rect").addClass("color_change");
$("#_2011 rect").removeClass("color_change");
$("#rect_11").removeClass("blue_selected");
$("#rect_13").addClass("blue_selected");
$('#2013 text').addClass("text_wht");
$('#2011 text').removeClass("text_wht");
$('#asterisks_11').addClass("hidden");
}, 13000);
year2015 = window.setTimeout(function()
{
$("#_2015").removeClass("hidden");
$("#_2015 rect").addClass("color_change");
$("#_2013 rect").removeClass("color_change");
$("#rect_13").removeClass("blue_selected");
$("#rect_15").addClass("blue_selected");
$('#2015 text').addClass("text_wht");
$('#2013 text').removeClass("text_wht");
$('#asterisks_15').removeClass("hidden");
$('#asterisks_11').addClass("hidden");
}, 15000);
year2017 = window.setTimeout(function()
{
$("#_2017").removeClass("hidden");
$("#_2017 rect").addClass("color_change");
$("#_2005 rect").removeClass("color_change");
$("#rect_15").removeClass("blue_selected");
$("#rect_17").addClass("blue_selected");
$('#2017 text').addClass("text_wht");
$('#2015 text').removeClass("text_wht");
$('#asterisks_17').removeClass("hidden");
$('#asterisks_15').addClass("hidden");
}, 17000);

Answer 1

问题是单击侦听器没有执行，因为您必须在没有字母的地方单击按钮。尝试将侦听器更改为按钮容器。

尝试更改此行：

bns[i].addEventListener("click", function(event) {...

对于这个：

bns[i].parentElement.addEventListener("click", function(event) {...

Answer 2

首先，与其为每年变化的内容声明多个变量，不如使用数组来存储值，因为无论如何您每次都会清除所有值。

var timeouts = [];
// Add them to the array like this
timeouts.push(setTimeout(function(){ /*...*/ }, 1000));
// And clear them like this
for (let i = 0 ; i < timeouts.length ; i++) {
clearTimeout(timeouts[i]);
}

其次，我会将所有这些"按钮"包装在一个组标签中，并将 click 事件处理程序放在父级上，而不是像您所做的那样附加多个事件处理程序：

<g id="button-tray">
<g id="2017">
<rect id="rect_17" class="cls-10" x="708.07" y="550.46" width="65.91" height="47.54"></rect>
<text class="cls-19" transform="translate(727.98 593.05)">MR</text>
<text class="cls-20" transform="translate(716.05 571.44)">2017</text>
</g>
<!-- ... --> 
<g id="2002">
<rect id="rect_02" class="cls-10" x="41.09" y="550.46" width="65.91" height="47.54"></rect>
<text class="cls-19" transform="translate(60.72 593.05)">MR</text>
<text class="cls-20" transform="translate(50.1 571.44)">2002</text>
</g>
</g>

然后，您可以像这样附加处理程序：

$("#button-tray").addEventListener("click", function(event) {
console.log(event.target); // This is how you reference the clicked element
for (let i = 0 ; i < timeouts.length ; i++) {
clearTimeout(timeouts[i]);
}
});

第三，也是最重要的一点，单击按钮上的文本时，单击事件不会触发。 您可以使用以下代码对此进行测试：

bns[i].addEventListener("click", function(event) {
console.log("TEST");
}

为了解决您的问题，如果您添加父元素，以下代码将起作用：

var timeouts = [];
document.addEventListener("DOMContentLoaded", function autoPlay() {
window.addEventListener("load",function() {
addtoev();
});
function addtoev() {
$(#'button-tray').addEventListener("click", function(event) {
for (let i = 0 ; i < timeouts.length ; i++) {
clearTimeout(timeouts[i]);
}
});
}
}
timeouts.push(window.setTimeout(function() {
$("#_2002").removeClass("hidden");
$("#_2002 rect").addClass("color_change");
$("#rect_02").addClass("blue_selected");
$('#2002 text').addClass("text_wht");
$('#asterisks_02').removeClass("hidden");
}, 1000));
timeouts.push(window.setTimeout(function() {
$("#_2003").removeClass("hidden");
$("#_2003 rect").addClass("color_change");
$("#_2002 rect").removeClass("color_change");
$("#rect_02").removeClass("blue_selected");
$("#rect_03").addClass("blue_selected");
$('#2003 text').addClass("text_wht");
$('#2002 text').removeClass("text_wht");
$('#asterisks_03').removeClass("hidden");
$('#asterisks_02').addClass("hidden");
}, 3000));
timeouts.push(window.setTimeout(function() {
$("#_2005").removeClass("hidden");
$("#_2005 rect").addClass("color_change");
$("#_2003 rect").removeClass("color_change");
$("#rect_03").removeClass("blue_selected");
$("#rect_05").addClass("blue_selected");
$('#2005 text').addClass("text_wht");
$('#2003 text').removeClass("text_wht");
$('#asterisks_05').removeClass("hidden");
$('#asterisks_03').addClass("hidden");
}, 5000));
timeouts.push(window.setTimeout(function() {
$("#_2007").removeClass("hidden");
$("#_2007 rect").addClass("color_change");
$("#_2005 rect").removeClass("color_change");
$("#rect_05").removeClass("blue_selected");
$("#rect_07").addClass("blue_selected");
$('#2007 text').addClass("text_wht");
$('#2005 text').removeClass("text_wht");
$('#asterisks_05').addClass("hidden");
}, 7000));
timeouts.push(window.setTimeout(function() {
$("#_2009").removeClass("hidden");
$("#_2009 rect").addClass("color_change");
$("#_2007 rect").removeClass("color_change");
$("#rect_07").removeClass("blue_selected");
$("#rect_09").addClass("blue_selected");
$('#2009 text').addClass("text_wht");
$('#2007 text').removeClass("text_wht");
$('#asterisks_09').removeClass("hidden");
}, 9000));
timeouts.push(window.setTimeout(function() {
$("#_2011").removeClass("hidden");
$("#_2011 rect").addClass("color_change");
$("#_2009 rect").removeClass("color_change");
$("#rect_09").removeClass("blue_selected");
$("#rect_11").addClass("blue_selected");
$('#2011 text').addClass("text_wht");
$('#2009 text').removeClass("text_wht");
$('#asterisks_11').removeClass("hidden");
$('#asterisks_09').addClass("hidden");
}, 11000));
timeouts.push(window.setTimeout(function() {
$("#_2013").removeClass("hidden");
$("#_2013 rect").addClass("color_change");
$("#_2011 rect").removeClass("color_change");
$("#rect_11").removeClass("blue_selected");
$("#rect_13").addClass("blue_selected");
$('#2013 text').addClass("text_wht");
$('#2011 text').removeClass("text_wht");
$('#asterisks_11').addClass("hidden");
}, 13000));
timeouts.push(window.setTimeout(function() {
$("#_2015").removeClass("hidden");
$("#_2015 rect").addClass("color_change");
$("#_2013 rect").removeClass("color_change");
$("#rect_13").removeClass("blue_selected");
$("#rect_15").addClass("blue_selected");
$('#2015 text').addClass("text_wht");
$('#2013 text').removeClass("text_wht");
$('#asterisks_15').removeClass("hidden");
$('#asterisks_11').addClass("hidden");
}, 15000));
timeouts.push(window.setTimeout(function() {
$("#_2017").removeClass("hidden");
$("#_2017 rect").addClass("color_change");
$("#_2005 rect").removeClass("color_change");
$("#rect_15").removeClass("blue_selected");
$("#rect_17").addClass("blue_selected");
$('#2017 text').addClass("text_wht");
$('#2015 text').removeClass("text_wht");
$('#asterisks_17').removeClass("hidden");
$('#asterisks_15').addClass("hidden");
}, 17000));
});