javascript中的定时器

在javascript中有两种定时器,以下做简单介绍

1、setInterval()

setInterval() 按照指定的周期(以毫秒计)来调用函数或计算表达式。方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭。

setInterval()方法会返回一个number类型的值,用于clearInterval(timeId)清除定时器

简单案例如下:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	
</head>
<body>
     <input type="button" value="停止定时器" id="btn">
	<script>
		var timeId = setInterval( function(){
			alert("过了三秒");
		},3000);

		onload = function(){ //input标签在代码前面,可以不用onload,如果input在scipt标签的后面,这里必须用onload,因为此时按钮还没有初始化,不存在id为btn的按钮
			document.getElementById("btn").onclick = function(){
			window.clearInterval(timeId);
			}
		}
	</script>
	
</body>
</html>

2、setTimeout()

setTimeout():在指定的毫秒数后调用函数或计算表达式

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>title</title>
</head>
<body>
    <p>点击按钮,在等待 3 秒后弹出 "Hello"。</p>
    <button onclick="myFunction()">点我</button>
    <script>
    function myFunction()
        {
            setTimeout(function(){
                alert("Hello");
            },3000);
        }
    </script>
</body>
</html>

猜你喜欢

转载自blog.csdn.net/weixin_38888773/article/details/81623649