Question

以下代码无效，因为var clock_socket超出start功能。这很明显，但为什么呢？我认为如果在函数内部不存在具有相同名称的其他变量，那么外部变量在函数内部被“看到”。

var clock_socket = document.getElementById("clock");

var start = function(){   

    var hour = new Date();
    clock_socket.innerHTML = hour.toLocaleTimeString();

}

var emp = setInterval(function(){start()},1000);

Answer 1

您在这里看到的并不是您可能认为的功能范围问题。该函数可以看到您定义的全局变量，但是如果DOM尚未完全加载则不会。

要解决您的问题，请尝试像这样包装您的函数（如果您使用的是jquery）

jQuery(document).ready(function(){

    var clock_socket = document.getElementById("clock");    
    var start = function(){   
        var hour = new Date();
        clock_socket.innerHTML = hour.toLocaleTimeString();
    }
    var emp = setInterval(function(){start()},1000);

})

另一个建议是将脚本放在body标签的末尾，或者在文档准备就绪时调用事件监听器。

希望这有助于你

Answer 2

Crhistoph的答案很棒，但是如果您不使用jQuery，请在<head>

中编写代码时尝试以下操作

(function(){
  var load, unload;
  load = function () {
    // setup all your stuff here
  };
  unload = function () {
    // unset or cleanup
  };
  window.addEventListener('load',load,false);
  window.addEventListener('unload',unload,false);
}());

当然可以改进，但保证可以使用window.onload事件

没有看到函数外的Javascript变量

2 个答案: