论坛首页 入门技术论坛

setTimeout

浏览 3087 次
锁定老帖子 主题:setTimeout
该帖已经被评为新手帖
作者 正文
   发表时间:2008-07-29  

    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" 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>

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()在执行上是异步的。

论坛首页 入门技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics