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

Difference of defining a variable inside and outside a function

本文关键字：变量 区别 定义 外部 函数 内部      更新时间：2023-09-26

这里是javascript的新手。

TeamTreehouse博客有一个关于如何用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时，它都会返回正确的时间，但不再实时更新。

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

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

如果您想共享它，请在函数内部更新它。

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

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

在上述情况下，CCD_ 3是一个变量，其值是在加载脚本时分配的。

在另一种情况下，当updateMessage被调用时，var date一直被分配

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

var date = Date();

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

这里的问题不是在哪里定义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;
}

第二个例子中缺少setInterval吗？

除此之外，你走在了正确的轨道上，但有一个小问题：按照你现在的做法，当你加载页面时，你会得到Date((，然后一遍又一遍地使用相同的日期。

像这样的东西应该对你有效，因为它会给你一个全局变量，同时定期更改日期：

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