Question

我在这里使用AJAX + HTML，似乎无法正常工作。基本上，它（使用/使用）仅是第一个数字（计数），而其余的似乎都被遗忘了？

我的代码

<script id="ajax">
  var count = 200;
  var counter = setInterval(a2, 1000);

  function a2() {
    count = count - 1;
    if (count < 0) {
      clearInterval(counter);
      return;
    }
    document.getElementById("a2").innerHTML = count;
  }
</script>
<div id="a2"></div>

<script id="ajax">
  var count = 100;
  var counter = setInterval(a3, 1000);

  function a3() {
    count = count - 1;
    if (count < 0) {
      clearInterval(counter);
      return;
    }
    document.getElementById("a3").innerHTML = count;
  }
</script>
<div id="a3"></div>

任何人都知道可能是什么问题？我觉得我完全迷路了。

问题2： 当我将脚本推入实际使用时，它似乎只执行第一个脚本/代码，并且在第一个脚本时间用完后才执行下一个脚本。因此，如果第一个计时器正在运行，则第二个计时器似乎为空。

但是当我手动将脚本放入控制台时，它确实可以工作。

有什么想法吗？

谢谢！

Answer 1

这里的问题是JS中的var是函数范围的。由于您是从函数中使用它的，因此在整个脚本中它几乎是全局的。您如何将计数器实现变成一个函数并像这样调用它？

<script id="ajax">
  function counter (elem, count) {
    var counter = setInterval(func, 1000);

    function func() {
      count = count - 1;
      if (count < 0) {
        clearInterval(counter);
        return;
      }
      document.getElementById(elem).innerHTML = count;
    }
  }
  counter("a2", 200);
</script>
<div id="a2"></div>

<script id="ajax">
  counter("a3", 100);
</script>
<div id="a3"></div>

Answer 2

否，您应该在一个setInterval函数中添加两个代码以同时执行：

var count1=10;
var count2=5;
var counter=setInterval(a2, 1000);
function a2()
{
  if (count1 != 0)
  {
     count1--;
     //Some functions that are dependent of count1, eg.
     if(count1==3){document.getElementById("a2").style.color="red";}
  }
  if (count2 != 0)
  {
     count2--;
     //Some functions that are dependent of count2 eg.
     if(count2==3){document.getElementById("a3").style.color="red";}
  }
  if(count1==0 && count2==0){
 clearInterval(counter);
  }

 console.log('counting!');
 document.getElementById("a2").innerHTML=count1;
 document.getElementById("a3").innerHTML=count2;
}

<div id="a2"></div>
<div id="a3"></div>

如果您有两个依赖于计数器的不同函数，请使用上面的代码

Answer 3

尝试这个

var count_a2 = 200;
var counter_a2 = setInterval(a2, 1000);

function a2() {
  count_a2 = count_a2 - 1;
  if (count_a2 < 0) {
    clearInterval(counter_a2);
    return;
  }
  document.getElementById("a2").innerHTML = count_a2;
}

var count = 100;
var counter = setInterval(a3, 1000);

function a3() {
  count = count - 1;
  if (count < 0) {
    clearInterval(counter);
    return;
  }
  document.getElementById("a3").innerHTML = count;
}

<div id="a2"></div>
<div id="a3"></div>

我的Ajax倒数计时无法正常工作吗？

3 个答案: