javascript - 倒数计时器不适用于 AJAX

Question

我正在尝试用JS制作一个计数器。到目前为止，我已经成功实现了这一点，但是我现在遇到了一个问题。在使用 AJAX 检索倒计时时间时，我无法使其工作。这很奇怪，因为它适用于我的原始文件，但不适用于 AJAX 调用的 php 文件。

这工作正常: https://jsfiddle.net/6kvp25vv/

我不知道问题是什么。这是 HTML 页面:

<button onclick="upgrade('meat_max')" id="up_meat_max">+</button>

当我单击该按钮时，它会运行此 js 文件内的函数，该函数在upgrade.php 上创建 GET 请求:

function upgrade(building) {
  var file = 'upgrade.php?building=' + building;
  ajax(file, function(response) {
    document.getElementById('construction').innerHTML += response;
  })
}

function ajax(file, fn) {
  var xmlhttp = new XMLHttpRequest();
  xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
      fn(xmlhttp.responseText);
    }
  };
  xmlhttp.open('GET', file, true);
  xmlhttp.send();
}

这是来自upgrade.php的代码(使用AJAX发送到此文件的变量不用于测试代码的目的):

<div class="time">Time: <span id="timer">?</span></div>
  var hour = 2;
  var minute = 46;
  var second = 45;

  // function to make a counter
  function clockIt() {
    function clockO(digit) {
      if(digit<10) {
        return '0';
      } else {
        return '';
      }
    }

    document.getElementById('timer').textContent = hour + ':' + clockO(minute) + minute + ':' + clockO(second) + second;
    if(second>0) {
      second -= 1;
    } else if(minute>0) {
      minute -= 1;
      second += 59;
    } else if(hour>0) {
      hour -= 1;
      minute += 59;
    }
  }

  // runs the function every seconds
  clockIt();
  setInterval(function (){clockIt()}, 1000);

Answer 1

innerHTML 不执行 ajax 加载的脚本，在您的情况下我会做的是返回一个 JSON 编码的字符串，其中包含您需要的变量，并使用此提供的脚本在主脚本(已加载的脚本)上有一个函数，这样您就已经准备好了函数，并且只需通过 ajax 响应传递参数。

您可以使用以下方法解码 json 字符串:

obj = JSON.parse(jsonString);

例如:

Ajax JSON 响应字符串:

{"time": {"hour":2, "minute":46, "second": 45}, "html": "<div class=\"time\">Time: <span id=\"timer\"></span></div>"}

修改升级功能:

function upgrade(building) {
  var file = 'upgrade.php?building=' + building;
  ajax(file, function(response) {
    obj = JSON.parse(response);
    time = obj.time;
    document.getElementById('construction').innerHTML += obj.html;
    startCountdown(time.hour, time.minute, time.second);
  })
}

新功能

function startCountdown(hour, minute, second) {

    // function to make a counter
    function clockIt() {
      function clockO(digit) {
        if(digit<10) {
          return '0';
        } else {
          return '';
        }
     }

    document.getElementById('timer').textContent = hour + ':' +     clockO(minute) + minute + ':' + clockO(second) + second;
     if(second>0) {
        second -= 1;
     } else if(minute>0) {
       minute -= 1;
       second += 59;
     } else if(hour>0) {
       hour -= 1;
       minute += 59;
     }
 }

 // runs the function every seconds
 clockIt();
 setInterval(function (){clockIt()}, 1000);
}