漫谈定时器setTimeout()和setInterval()

最新推荐文章于 2023-04-24 11:20:38 发布

weixin_45545460

最新推荐文章于 2023-04-24 11:20:38 发布

阅读量97

点赞数

分类专栏： Java 文章标签： JavaScript

本文链接：https://blog.csdn.net/weixin_45545460/article/details/100526161

版权

Java 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

setTimeout(fn,millisec)

用于在指定的毫秒数后调用函数或计算表达式，只执行一次。
示例：

<html>
    <head>
        <title></title>
    </head>
    <body>
        <script type="text/javascript">
        // 3000毫秒后调用内部的匿名函数，注意只执行一次
        setTimeout(function(){
        	alert("aa");
        },3000);
            </script>
    </body>
</html>

结果：3秒后显示
在这里插入图片描述

setInterval(fn,millisec)

可按照指定的周期（以毫秒计）来调用函数或计算表达式，循环执行多次.
示例：

<html>
    <head>
        <title></title>
    </head>
    <body>
        <script type="text/javascript">
        // 每隔200毫秒后调用一次函数
         setInterval启动的时候 将句柄 赋值给一个变量
         var timer=setInterval(function(){
        	console.log("aa");
        },200);
        //function stop(){
        //clearInterval(timer);
        //}
         </script>
    </body>
</html>

结果：
在这里插入图片描述

定时清除函数

clearInterval( timer ) 方法
可取消由 setInterval() 设置的 timeout
clearTimeout( timer ) 方法
可取消由 setTimeout() 方法设置的 timeout
示例：

<html>
    <head>
        <title></title>
    </head>
    <body>
        <script type="text/javascript">
        // 每隔2000毫秒后调用一次函数
        // setInterval启动的时候 将句柄 赋值给一个变量
        var timer=setInterval(function(){
        	console.log("aa");
        },200);
        function stop(){
        clearInterval(timer);
        }
            </script>
    </body>
</html>

练习:页面制作十秒倒计时效果

<html>
<head>
<title> setTimeout</title>
</head>
<body>
<h1>10</h1>
<input type="button" value="开始" onclick="start()" />
<input type="button" value="停止" onclick="stop()" />
<script type="text/javascript">
// 1 获取元素
var h=document.getElementsByTagName("h1")[0];
var timer=null;
// 2 操作元素
function start(){
	if(timer==null){
		timer=setInterval(function(){
			var t=h.innerHTML;
			if(t==0){
				// 关闭setIterval
					stop();
				// 弹框
					alert("时间到！");
			}else{
				t--;
				h.innerHTML=t;
			}	
		},1000);
	}
}
function stop(){
	if(timer!=null){
		h.innerHTML=10;
		clearInterval(timer);
		timer=null;
	}
}
</script>
</body>
</html>

在这里插入图片描述
练习：页面制作10秒计时器：

<html>
    <head>
        <title>setTimeout</title>
    </head>
    <body>

        <h1>0</h1>
        <input type="button" value="开始" onclick="start()">
        <input type="button" value="暂停" onclick="pause()">
        <input type="button" value="停止" onclick="stop()">

        <script type="text/javascript">
           
        //1.获取元素
        var h=document.getElementsByTagName("h1")[0];
        var timer=null;
        //2.操作元素
        function start(){
	        if(timer==null){
		        timer=setInterval(function(){
			    var t=h.innerHTML;
				t++;
				h.innerHTML=t;	
        },1000);
	    }
    }
        function pause(){
            if(timer!=null){
                clearInterval(timer);
                timer=null;
            }
        }
       function stop(){
            pause();
            h.innerHTML=0;           
       }     
            </script>
    </body>
</html>