JavaScript、移动等待栏、意外行为

Question

我正在尝试用 JavaScript 实现一个移动的等待栏。这应该在 AJAX 请求期间可见。

我的初始代码似乎可以工作，但有一个限制，即它只能在页面上使用一次，因为只有变量timerW和stateW作为全局变量只能出现一次，并且元素id也只能出现一次在 html 文档中。

var timerW;
var stateW = 1;


 function nextW(){

  switch (stateW){
   case 1:
    document.getElementById('d3').style.background = "grey";
    document.getElementById('d1').style.background = "red";
    stateW++;
    timerW = setTimeout("nextW()",250);
    break;
   case 2:
    document.getElementById('d1').style.background = "grey";
    document.getElementById('d2').style.background = "red";
    stateW++;
    timerW = setTimeout("nextW()",250);
    break;
   case 3:

    document.getElementById('d2').style.background = "grey";
    document.getElementById('d3').style.background = "red";
    stateW = 1;
    timerW = setTimeout("nextW()",250);
    break;
  }
 }


 function Wait(mainE){
  document.getElementById(mainE).innerHTML = '<div id="d1" class="d"></div><div id="d2" class="d"></div><div id="d3" class="d"></div>';
  nextW(mainE);

}

因此，从那里我想扩展它，使多个等待 block 可见。

我尝试解决的第一个问题是生成的 html，因此具有唯一的 ID

 var timerW;
 var stateW = 1;

 function nextW(mainE){


  // Unexplained behaviour
  // for some reason, I get the HTMLDivElement in stead of it's ID in a string,
  // This appears to start when stateW is 3.
  // the setTimeout in case 1 looks identical to the case 2, so I have no clue why
  // I am getting an object in stead of my string.


  var m;
  if (typeof(mainE)=="object") {
   m = mainE;
   mainE = m.id;
  } else {
   m = document.getElementById(mainE);
  }



  if (m == undefined ) return; 
  if (m.style.visibility == "hidden") return;

  for(i=0; i < m.children.length; i++) {
   if (m.children[i].id=="wait") {
    m = m.children[i];
    break;
   }
  }
  if (stateW[mainE]==undefined) stateW[mainE] = 1;

  switch (stateW[mainE]){
   case 1:

    for(i=0; i < m.children.length; i++) {
     var e = m.children[i];
     if (e.id==mainE+'d1'){
      e.style.background = "red";
     } else {
      e.style.background = "gray";
     }
    }
    stateW++;
    timerW = setTimeout("nextW("+mainE+")",250);
    break;
   case 2:

    for(i=0; i < m.children.length; i++) {
     var e = m.children[i];
     if (e.id==mainE+'d2'){
      e.style.background = "red";
     } else {
      e.style.background = "gray";
     }
    }

    stateW++;
    timerW = setTimeout("nextW("+mainE+")",250);
    break;
   case 3:
    for(i=0; i < m.children.length; i++) {
     var e = m.children[i];
     if (e.id==mainE+'d3'){
      e.style.background = "red";
     } else {
      e.style.background = "gray";
     }
    }

    stateW = 1;
    timerW = setTimeout("nextW("+mainE+")",250);
    break;
  }
 }

 function Wait(mainE){
  document.getElementById(mainE).innerHTML = '<div id="wait"><div id="'+mainE+'d1" class="d"></div><div id="'+mainE+'d2" class="d"></div><div id="'+mainE+'d3" class="d"></div></div>';
  nextW(mainE);
 }

此代码会导致无法解释的行为。当我使用设置计时器时

 timerW = setTimeout("nextW("+mainE+")",250);

在每种情况下，第二个 block 都正确绘制为红色，但之后，我得到一个 HTMLDivElement 而不是我期望的字符串。 HTMLDivElement 与我期望的字符串中的 ID 相对应。我无法解释为什么，只有在第二个 block 被绘制为红色之后，行为才会发生变化。在第二个红色 block 之后，它不断给我一个 HTMLDivElement，但我无法解释原因。

到目前为止一切顺利，我可以围绕这个小问题编写代码，尽管我无法解释为什么会发生这种情况。

不过，代码尚未准备好同时运行多个等待计时器。为此，我尝试创建两个对象

 var timerW = new Object();
 var stateW = new Object();

并替换我的

 switch (stateW){

与

 if (stateW[mainE]==undefined) stateW[mainE] = 1;
 switch (stateW[mainE]){

并替换

   timerW = setTimeout("nextW("+mainE+")",250);

与

   timerW[mainE] = setTimeout("nextW("+mainE+")",250);

现在的问题是，在第一次运行 nextW 函数后，我的对象变成了 NaN。我预计这是由垃圾收集引起的。

谁能解释一下(1) 为什么我会在字符串中获取 HTMLDivElements？(2) 为什么我的Object变成了NaN？(3)如何解决这个问题？

我不仅仅是在寻找解决方案，而且还想知道发生了什么。

Answer 1

构造函数

function Wait(el) {
    if (typeof el == "string") el = document.getElementById(el);
    this.el = el;
    this.state = 1;
    this.el.innerHTML = '<div id="d1" class="d"></div>\
                         <div id="d2" class="d"></div>\
                         <div id="d3" class="d"></div>';
    this.next();
}

动画步骤

Wait.prototype.next = function () {
    if (this.el.style.visibility == "hidden") return;
    var children = this.el.childNodes;

    for (var i = children.length; i--;) {
        if (children[i].id == "wait") {
            var wait = children[i];
            break;
        }
    }

    children = wait.childNodes;

    for (var i = children.length; i--;) {
        var child = children[i];
        if (child.id == this.el.id + 'd' + this.state) {
            child.style.background = "red";
        } else {
            child.style.background = "gray";
        }
    }

    this.state++;
    if (this.state > 3) this.state = 0;
    this.timer = setTimeout(this.next, 250);
}​

使用

new Wait("element_id");​