JavaScript倒计时按钮实现与DOM加载时机解析

JavaScript倒计时按钮实现与DOM加载时机解析

正确的源程序代码如下所示：

 
<script type="text/javascript">
var lastTime = 3;
function abc() {
var btnReg = document.getElementById("btnReg");
if (!btnReg) { return; }
if (lastTime <= 0) {
btnReg.value = "同意";
btnReg.disabled = "";
clearInterval("TimeId");
} 
} else {
btnReg.value = "还剩下" + lastTime + "秒";
lastTime--;
} 
} 
var TimeId = setInterval("abc()", 1000);
}</script>

若尝试将第四行的 var btnReg = document.getElementById("btnReg") 修改为全局变量定义 btnReg = document.getElementById("btnReg")，并将其放置于函数 abc() 外部，程序将无法实现预期功能。

上述修改导致程序功能失效。

其根本原因在于浏览器解析HTML页面的顺序是从上至下。当代码执行到 btnReg = document.getElementById("btnReg") 时，页面上 id 为 btnReg 的按钮元素尚未被解析渲染，因此此时全局变量 btnReg 的值为 undefined（未定义）。

由于全局变量仅在页面加载初期执行一次，此时按钮尚未存在，导致获取失败；而正确的源程序在每隔一秒执行 abc() 函数时，会重新通过 document.getElementById 获取按钮元素。当倒计时进行到按钮已被解析渲染后，即可成功获取到该元素的值，从而使程序功能正常运行。