文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >clearTimeout仅适用于SVG的页面重新加载JavaScript。

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

Stack Overflow用户
提问于 2018-05-08 16:22:19
回答 2查看 77关注 0票数 0

我编写这段JS是为了让setTimout在单击时使用"clearTimeout“清除。我面临的问题是，它只在第一次刷新之后才能工作。应该发生的是，代码应该清除超时，因此导航中的年份将停止前进。函数"addtoev“包含应该停止代码的函数。

我在这里有一个链接到我的密码：

athena/pen/MGrGyy

我的JS一团糟，因为我真的不知道如何编写代码，但我希望至少能有一个超时时间来清除。

代码语言：javascript
复制
    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);
javascript
jquery
svg
EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2018-05-08 16:58:08

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

尝试更改这一行：

代码语言：javascript
复制
bns[i].addEventListener("click", function(event) {...

这一次：

代码语言：javascript
复制
bns[i].parentElement.addEventListener("click", function(event) {...
票数 0
EN

Stack Overflow用户

发布于 2018-05-08 17:28:32

首先，与其为每年更改的内容声明多个变量，不如使用数组来存储值，因为您每次都要清除所有这些值。

代码语言：javascript
复制
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事件处理程序放在父节点上，而不是像您正在做的那样附加多个事件处理程序：

代码语言：javascript
复制
<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>

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

代码语言：javascript
复制
$("#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]);
    }
});

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

代码语言：javascript
复制
bns[i].addEventListener("click", function(event) {
  console.log("TEST");
}

要解决问题，如果添加父元素，下面的代码将工作：

代码语言：javascript
复制
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));

});
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/50238193

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档