Question

这里是javascript新手。

Team Treehouse博客有一个关于如何在javascript中构建计时器的小教程。它基本上是以下代码：

<h1 id="timer">Loading</h1>

var updateMessage = function(){ 
  var date = Date();
  var message = document.getElementById("timer");
  message.innerHTML = "The time is " + date;
}

var timer = setInterval(updateMessage, 500);

这很好用。但是，我想将date用于多个功能。我试过以下......

var date = Date();
var updateMessage = function(){ 
  var message = document.getElementById("timer");
  message.innerHTML = "The time is " + date;
}

..但现在它不能实时工作。每当我点击 F5 时，它会返回正确的时间，但它不会再实时更新。

这是为什么？我认为当我在函数之外声明一个变量时，它将成为一个可以在任何地方使用的全局函数。

Answer 1

因为Date()是您调用它的时间，所以它不会继续更新！

如果要共享，请在功能内部进行更新。

var date;
var updateMessage = function(){ 
   date = new Date();
  var message = document.getElementById("timer");
  message.innerHTML = "The time is " + date;
}

Answer 2

var date = Date();
var updateMessage = function(){ 
  var message = document.getElementById("timer");
  message.innerHTML = "The time is " + date;
}

在上面的情况var date是一个变量，其值在加载脚本时分配。

在另一种情况下，var date在调用updateMessage时分配所有时间

var updateMessage = function(){ 
  var date = Date();
  var message = document.getElementById("timer");
  message.innerHTML = "The time is " + date;
}

Answer 3

var date = Date();

仅在脚本加载时执行一次。变量日期在网页的整个生命周期内保持不变。这就是为什么它只在刷新页面时才会改变。

Answer 4

此处的问题不是您定义date变量的位置，而是您调用Date()函数的位置和次数。

全局声明它，但每次需要时都进行必要的呼叫也是一种有效的解决方案。

var date; // declaration

var updateMessage = function(){ 
  var message = document.getElementById("timer");
  date = Date(); // call to Date() everytime updateMessage is executed
  message.innerHTML = "The time is " + date;
}

Answer 5

你在第二个例子中缺少setInterval吗？

除此之外，你走在正确的轨道上，但有一点问题：你现在这样做的方式，你在加载页面时得到Date（），并且一遍又一遍地使用相同的日期

这样的事情对你有用，因为它会在改变日期时给你一个全局变量：

var date = Date();
var updateMessage = function(){ 
  date = Date();
  var message = document.getElementById("timer");
  message.innerHTML = "The time is " + date;
}

在函数内部和外部定义变量的区别

5 个答案: