setTimeout

holdbelief · 发表于 2013-2-7 18:23:46

   setTimeout的作用：延迟一段时间执行某个函数。例如：setTimeout("start_time();",5000);延迟5秒执行start_time()函数，注意不是每隔5秒执行一次start_time()函数,是只执行一次start_time()函数。
    可以用这个函数作个计时器，写个例子如下：

<!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 = 0;
    }

    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"  value="按钮1">
<input type="button"  value="按钮2">
<input type="button"  value="停止计时">
<input type="button"  value="置零">
<input type="text" id="txt">
</body>
</html>

1。点“按钮2”时，执行buttonClick2()函数，计时器开始计时，因为setTimeout("buttonClick2();",5000);的参数是buttonClick2()自己，所以达到了每5秒执行一次的效果。
2。点“按钮1”时，执行buttonClick()函数，因为setTimeout("start_time();",5000);的参数是start_time()，作用是在5秒之后执行一次start_time()函数，注意只执行一次start_time()函数。
3。点“按钮1”时，执行buttonClick()函数，setTimeout();alert();连个方法执行上是没有先后顺序的，
实际的结果证明，点“按钮1”后，立即执行alert()函数, alert();函数并不是在setTimeout()在延迟了5秒并执行完start_time()后才执行。说明setTimeout()在执行上是异步的。

		自动登录	找回密码
密码			立即注册