本文通过一个具体的HTML页面示例展示了JavaScript中setTimeout函数的使用方法。包括如何设置定时任务、取消定时任务以及递归调用定时器等关键概念。示例中还包含了按钮触发定时任务的功能演示。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>setTimeout示例</title>
</head>
<body>
<script type="text/javascript" language="javascript">
var i=0;
function start_time()
{
i++;
document.getElementById('txt').value = i;
}
function stop_time()
{
clearTimeout(b);
}
function reset_time()
{
document.getElementById('txt').value = '';
}
function buttonClick()
{
setTimeout("start_time();",5000);
alert('证明setTimeout是异步调用,setTimeout方法在alert方法之前,但是两个方法没有执行的先后顺序。');
}
function buttonClick2()
{
i++;
document.getElementById('txt').value = i;
b = setTimeout("buttonClick2();",5000);
}
</script>
<input type="button" onclick="buttonClick();" value="按钮1">
<input type="button" onclick="buttonClick2();" value="按钮2">
<input type="button" onclick="stop_time();" value="停止计时">
<input type="button" onclick="reset_time();" value="置零">
<input type="text" id="txt">
</body>
</html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>setTimeout示例</title>
</head>
<body>
<script type="text/javascript" language="javascript">
var i=0;
function start_time()
{
i++;
document.getElementById('txt').value = i;
}
function stop_time()
{
clearTimeout(b);
}
function reset_time()
{
document.getElementById('txt').value = '';
}
function buttonClick()
{
setTimeout("start_time();",5000);
alert('证明setTimeout是异步调用,setTimeout方法在alert方法之前,但是两个方法没有执行的先后顺序。');
}
function buttonClick2()
{
i++;
document.getElementById('txt').value = i;
b = setTimeout("buttonClick2();",5000);
}
</script>
<input type="button" onclick="buttonClick();" value="按钮1">
<input type="button" onclick="buttonClick2();" value="按钮2">
<input type="button" onclick="stop_time();" value="停止计时">
<input type="button" onclick="reset_time();" value="置零">
<input type="text" id="txt">
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
