setTimeout

最新推荐文章于 2024-10-14 15:28:14 发布

HoldBelief

最新推荐文章于 2024-10-14 15:28:14 发布

阅读量195

点赞数

分类专栏： JavaScript&Ajax 文章标签： JavaScript HTML ViewUI

JavaScript&Ajax 专栏收录该内容

43 篇文章

订阅专栏

    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" οnclick="buttonClick();" value="按钮1">
<input type="button" οnclick="buttonClick2();" value="按钮2">
<input type="button" οnclick="stop_time();" value="停止计时">
<input type="button" οnclick="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()在执行上是异步的。