Question

我有一个可以正常工作的功能，但只有在登陆到特定页面后重新加载页面时才可以。

该函数是一个计时器函数，在页面加载时从10开始降级为0（它应该像这样工作）。

但是我登陆页面并没有任何反应。当我重新加载页面时，计时器启动并开始工作...

我尝试了$（document）.on和window.onload = function（），但是没有成功。

FlowRouter.route("/waitingForPlayer", {
  name: "waitingForPlayer",
  action() {
    BlazeLayout.render("iphone", { main: "waitingForPlayer" });
    console.log("first");
    window.onload = startTimer;

    function startTimer(duration, display) {
      console.log("second");
      var timer = duration,
        seconds;
      setInterval(function() {
        console.log("third");
        seconds = parseInt(timer % 60, 10);
        seconds = seconds < 10 ? "" + seconds : seconds;
        display.textContent = seconds;

        if (--timer < 0) {
          timer = duration;
        }
        if (timer == 0) {
          FlowRouter.go("readyForGame");
          document.location.reload(true);
        }
      }, 1000);
    }

    window.onload = function() {
      var fiveMinutes = 10,
        display = document.querySelector("#time");
      startTimer(fiveMinutes, display);
    };
  }
});

当计时器= 0时，flowrouter会更改视图。

Answer 1

我认为问题在于您将onload函数放在了路由器回调中。您无需在路由器的回调中运行window.onload，因为它是Single page application路由器。尝试查找流路由器库的onComplete事件。我认为action是路由器完成事件的回调。

示例：

function startTimer(duration, display) {
  console.log("second");
  var timer = duration, seconds;

  setInterval(function() {
    console.log("third");
    seconds = parseInt(timer % 60, 10);
    seconds = ('0' + seconds).slice(-2);

    display.innerText = seconds;

    if (--timer < 0) {
      timer = duration;
    }
    if (timer == 0) {
      FlowRouter.go("readyForGame");
    }
  }, 1000);
}

FlowRouter.route("/waitingForPlayer", {
  name: "waitingForPlayer",
  action: function() {
    BlazeLayout.render("iphone", { main: "waitingForPlayer" });
    console.log("first");

    var fiveMinutes = 10,
      display = document.querySelector("#time");
    startTimer(fiveMinutes, display);
  }
});

仅当手动重新加载页面时，Javascript函数才会启动

1 个答案: