JS一千问(33):如何应用超时setTimeout和setInterval?

JavaScript中,超时管理用到setTimeout和setInterval,本质上是允许开发人员在脚本中指定函数或JavaScript代码段在指定的时间间隔过去后执行或仅在设定的间隔时间重复运行。

setTimeout和setInterval

setTimeout

var timerId = setTimeout(callback, time, arg1, arg2, arg3, ...);
  • callback 延时后需要执行的函数
  • time 延时时间,单位:毫秒
  • arg1… 附加参数(可选)

实例

3秒后输出【Hello World!】。

完整代码:

<div><button onclick="start()">开始</button><span id='result'></span></div>

<script>
	var start = function () {
		setTimeout(function(args) {
			document.getElementById('result').innerHTML = args;
		}, 3000, 'Hello World!');
	};
</script>

setInterval

var timerId = setInterval(callback, time, arg1, arg2, arg3, ...)
  • callback 每次间隔需要执行的函数
  • time 间隔时间,单位:毫秒
  • arg1 附加参数(可选)

实例

每秒加一,计数器。

完整代码:

<div><button onclick="start()">开始</button><span  id='result'></span></div>

<script>
	var a = 0;
	var start = function () {
		var t = setInterval(function(args) {
			a++;
			show(a);
		}, 1000, 'Hello World!')
	};

	var show = function (value) {
		document.getElementById('result').innerHTML = value;
	}
</script>

为了取消定时任务,JavaScript提供了两种方法:clearTimeout()和clearInterval()。

var t1 = setTimeout(...);
clearTimeout(t1);

var t2 = setInterval(...);
clearInterval(t2);

Leave a Comment

您的电子邮箱地址不会被公开。 必填项已用*标注