首页 > 解决方案 > 全局变量在 setTimeout() 运行时发生变化

问题描述

我一直在寻找解决这个问题的几个小时,但没有运气。1) 用户点击一个按钮,一个图像文件名被保存到一个全局变量中。2)用户点击页面上的另一个div,首先播放一个动画图像5秒。3) 5 秒后,动画图像被第 1 阶段保存到全局变量的图像文件引用替换(在相同的 'src' 位置)。

只要用户在这 5 秒内没有单击不同的图像(因此在阶段 1 中更改变量),这一切都很好,如果他们这样做了,那么变量会在放置第二个图像之前更新。

我尝试使用括号表示法将变量的内容发送到另一个函数,因为我认为这会使变量“暂停”以某种方式独一无二,但这不起作用。我也将功能分开,但这无济于事。我以前从未使用过数组,但我也尝试将每个选择推入数组的后面并在需要时拉出第一项,但这有点超出我的能力。谁能建议在这 5 秒内唯一存储每个变量的最佳方法?

  function makeSelection(iGCode) {
    var itemGroupVar = $(event.target).attr('id');
    /*var itemGroupGet = document.getElementById(itemGroup);*/
    var groupIDBColor = document.getElementById(itemGroupVar).style.backgroundColor;
    selectedItemCache = iGCode;
    if (groupIDBColor == '') {
      resetHighlighted();
      document.getElementById(itemGroupVar).style.backgroundColor = 'rgba(255, 0, 0)';
    } else {
      document.getElementById(itemGroupVar).style.backgroundColor = '';
      selectedItemCache = '';
    }
  } 


  function populateCell(clicked_id)
  {
      var clicked_id2 = "i"+clicked_id;
      document.getElementById(clicked_id2).src = 'images/constructionAnim/constructionAnim1.svg';
      pauseBuild([clicked_id2]);
  }
  function pauseBuild(pause)
  {
    setTimeout(function() 
    {
      document.getElementById(pause).src = selectedItemCache;
    }, 4000);
  }
<div class="itemGroup itemsRes" id="group1" onclick="makeSelection('images/h100-500-1f-01.svg')">

<div class="r1d allCells" id="c0001" onClick="populateCell(this.id)"><img id="ic0001" src=""></div>
<div class="r1d allCells" id="c0002" onClick="populateCell(this.id)"><img id="ic0002" src=""></div>

标签: javascript

解决方案


塔普拉钉住了它。我需要用 [] 使两个变量名都是唯一的。我没有意识到这一点,因为只有一个的内容是唯一的,但当然是变量名导致了问题。感谢你的帮助。

  function populateCell(clicked_id)
  {
      var clicked_id2 = "i"+clicked_id;
      document.getElementById(clicked_id2).src = 'images/constructionAnim/constructionAnim1.svg';
      var selectedItemCache2 = selectedItemCache;
      pauseBuild([clicked_id2],[selectedItemCache2]);
  }
  function pauseBuild(pause,pause2)
  {
    setTimeout(function() 
    {
      document.getElementById(pause).src = pause2;
    }, 4000);
  }

推荐阅读