<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>精美的图片时钟</title>
<script>
function dealTime(i){
if(i<10)
return i="0"+i;
else
return i.toString();
}
window.onload = function() {
function setTime() {
var d1 = document.getElementById("a");
var obj = d1.getElementsByTagName("img");
var date = new Date();
var hour = dealTime(date.getHours());
var minute = dealTime(date.getMinutes());
var second = dealTime(date.getSeconds());
var str = hour+minute+second;
for(var i = 0; i < obj.length; i++) {
obj[i].src = "img/0" + str.charAt(i) + ".jpg";
}
}
setInterval(setTime,1000);
setTime();
}
</script>
</head>
<body >
</body>
</html>
在函数setTime()里面调用setIntreval()函数时,如果用setIntreval(“setTime()”,t)、setIntreval(setTime(),t)都会出错,而只有出现setInterval(setTime,t)时才会正常运行。
原因解释为:JavaScript有一个预编译处理,首先对函数和变量进行预编译。也就是说其函数和变量作用域是在其声明的时候确定的,而不是在执行的时候确定。window.onload相对于window来说就是局部的。而此时当setInterval把函数参数的执行环境换为全局的后,因为全局不能访问局部的函数和变量,因此setInterval对函数的调用是无效的。
setInterval 第一个参数 可以是函数名、匿名函数、函数的引用以及其他可执行代码。而对于setIntreval(setTime(),t)来说,setTime()是对函数的直接调用,也就是说当setInterval还没有开始函数setTime()就执行了。如果这个函数没有返回值或者返回值不是可执行的函数或者其他的代码的话,函数执行就会报错了。
并且我们发现,在全局作用域下 setInterval(“setTime()”,t)可以正常执行,但放到window.onload函数中却不能执行。