JavaScript定时器与焦点检测实战：实现逐字输出与条件执行

JavaScript定时器基础与区别

在JavaScript语言中，主要提供两类用于控制时间执行的专用函数。

第一类为单次执行定时器，语法格式为：timename=setTimeout("function();",delaytime);

第二类为循环执行定时器，语法格式为：timename=setInterval("function();",delaytime);

上述语法中的第一个参数“function()”代表定时器触发时需执行的具体动作，该参数可以是单个函数，也可以是多个函数序列，各函数之间使用分号“;”进行分隔。例如，若需连续弹出两个警告窗口，可将“function();”替换为

“alert('第一个警告窗口!');alert('第二个警告窗口!');”；第二个参数“delaytime”表示时间间隔，单位为毫秒。若填写数值“5000”，即代表延迟5秒后执行。

两者的核心区别在于执行频率：倒计时定时器（setTimeout）仅在指定时间到达后触发一次事件；而循环定时器（setInterval）则在每次间隔时间到达时反复触发事件，直至被手动停止。

应用场景方面，若需在打开页面后间隔数秒自动跳转至其他页面，应使用倒计时定时器“setTimeout("function();",delaytime)”；若需实现文字逐个字符出现的动画效果，

则应使用循环定时器“setInterval("function();",delaytime)”来持续刷新显示内容。

基于document.activeElement的焦点检测

要判断当前哪个表单元素获得焦点，可以使用document.activeElement.id属性。通过if语句比较document.activeElement.id与目标表单的ID是否一致，即可确定焦点状态。

示例代码为：if ("mid" == document.activeElement.id) {alert();}，其中“mid”即为对应表单元素的ID属性值。

定时器实战案例：逐字输出与条件检查

例1演示了在表单触发或页面加载时，通过定时器实现字符串的逐字输出效果。

 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script language="JavaScript" type="text/javascript">
var str = "这个是测试用的范例文字";
var seq = 0;
var second=1000; //间隔时间1秒钟
function scroll() {
msg = str.substring(0, seq+1);
document.getElementById('word').innerHTML = msg;
seq++;
if (seq >= str.length) seq = 0;
} 
</script>
</head>
<body onload="setInterval('scroll()',second)">
<div id="word"></div><br/><br/>
</body>
</html>

例2演示了当焦点位于输入框时，定时检查输入框内容；当焦点离开时，停止检查动作。

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script language="JavaScript" type="text/javascript">
var second=5000; //间隔时间5秒钟
var c=0;
function scroll() {
c++;
if ("b" == document.activeElement.id) {
var str="定时检查第<b> "+c+" </b>次<br/>";
if(document.getElementById('b').value!=""){
str+="输入框当前内容为当前内容为<br/><b> "+document.getElementById('b').value+"</b>";
} 
document.getElementById('word').innerHTML = str;
} 
} 
</script>
</head>
<body>
<textarea id="b" name="b" style="height:100px; width:300px;" onfocus="setInterval('scroll()',second)"></textarea><br/><br/>
<div id="word"></div><br/><br/>
</body>
</html>

例3展示了最简单的定时器应用：当设定的时间到达后，直接弹出警告窗口。

 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<script language="javascript">
function count() {
document.getElementById('m').innerHTML="计时已经开始！";
setTimeout("alert('十秒钟到！')",10000)
} 
</script>
<body>
<div id="m"></div>
<input TYPE="button" value=" 计时开始" onclick="count()">
</body>
</html>