javascript里的定时器有哪些

2021-11-27 21:01:32 IT技术网 互联网
浏览

javascript里的定时器有两种：1、单次定时器，使用setTimeout()方法定义，可以在规定时间（以毫秒计）过后执行一次代码块；2、循环定时器，使用setInterval()方法定义，按照指定的周期（以毫秒计）来重复执行某些代码。

本教程操作环境：windows7系统、javascript1.8.5版、Dell G3电脑。

在 JavaScript 中，我们可以利用定时器来延迟执行某些代码，或者以固定的时间间隔重复执行某些代码。例如，您可以使用定时器定时更新页面中的广告或者显示一个实时的时钟等。

JavaScript 中提供了两种定时器：setTimeout() 和 setInterval()

方法说明
setTimeout()在指定的时间后（单位为毫秒），执行某些代码，代码只会执行一次
setInterval()按照指定的周期（单位为毫秒）来重复执行某些代码，定时器不会自动停止，除非调用 clearInterval() 函数来手动停止或着关闭浏览器窗口

setTimeout()

JS setTimeout() 函数用来在指定时间后执行某些代码，代码仅执行一次。

使用方法：

setTimeout(code,millisec)

  • code 必需。要调用的函数后要执行的 JavaScript 代码串。

  • millisec 必需。在执行代码前需等待的毫秒数。

实例：

<html>
	<head>
		<meta charset="utf-8" />
	</head>
	<body>
		<button id="button" onclick="click1()">获取验证码</button>
		<span id="span"></span>
		<script>
			var time = 10;
			var num;
			var button = document.getElementById("button");
			var span = document.getElementById("span");
 
			function click1() {
				//click是关键字,所有函数名改为click1
				if (time == 0) {
					button.disabled = false;
					time = 10;
					span.innerHTML = "";
					clearTimeout(num);
				} else {
					button.disabled=true;
					span.innerHTML = time + "秒后重新获得返回值";
					time--;
					num = setTimeout("click1()",1000);
				}
			}
		</script>
	</body>
</html>

setInterval()

JS setInterval() 函数可以定义一个能够重复执行的定时器，每次执行需要等待指定的时间间隔。

使用方法：

setInterval(code,millisec[,"lang"])

  • code 必需。要调用的函数或要执行的代码串。

  • millisec 必须。周期性执行或调用 code 之间的时间间隔，以毫秒计。

实例：

<html>
	<head>
		<meta charset="utf-8" />
	</head>
	<body>
		<button id="button" onclick="set()">获取验证码</button>
		<span id="span"></span>
		<script>
			var time = 10;
			var num;
			var button = document.getElementById("button");
			var span = document.getElementById("span");
 
			function set() {
				num = setInterval("click()", 1000);
				button.disabled = true;
			}
 
			function click() {
				if (time == 0) {
					button.disabled = false;
					time = 10;
					span.innerHTML = "";
					clearInterval(num);
				} else {
					span.innerHTML = time + "秒后重新获得返回值"
					time--;
				}
			}
		</script>
	</body>
</html>

【推荐学习：javascript高级教程】

以上就是javascript里的定时器有哪些的详细内容，更多请关注dnjidi.com其它相关文章！
javascript 定时器 setTimeout() setInterval()