setTimeout和setInterval的区别

最新推荐文章于 2022-11-10 16:58:02 发布

原创最新推荐文章于 2022-11-10 16:58:02 发布 · 285 阅读

0 ·

CC 4.0 BY-SA版权

js 专栏收录该内容

13 篇文章

订阅专栏

本文深入讲解JavaScript中的setTimeout和setInterval函数的使用方法及注意事项，包括它们的语法、工作原理、常见应用场景以及在实际开发中的最佳实践。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用方式：

setTimeout (表达式, 延时时间)

setInterval(表达式, 交互时间)

延时时间/交互时间是以豪秒为单位的(1000ms=1s)

setTimeout()方法是在等待指定时间后执行函数内容, 且只执行一次传入的表达式。

<html>
<head>
<script type="text/javascript">
function timedMsg()
{
   var t=setTimeout("alert('5 seconds!')",5000)
}
</script>
</head>
 
<body>
<form>
<input type="button" value="Display timed alertbox!" onClick="timedMsg()">
</form>
<p>Click on the button above. An alert box will be displayed after 5 seconds.</p>
</body>
 
</html>

setInterval()方法是每指定间隔时间后执行一次传入的表达式,循环执行直至关闭窗口或clearInterval()。

<html>
<body>
 
<input type="text" id="clock" size="35" />
<script language=javascript>
var int=self.setInterval("clock()",50)
function clock()
  {
  var t=new Date()
  document.getElementById("clock").value=t
  }
</script>
</form>
<button onclick="int=window.clearInterval(int)">
Stop interval</button>
 
</body>
</html>

setTimeout用于延迟执行：

let x = 1;

setTimeout(() => x++, 0);

console.log(x);

若在控制台输出，也就是异步调用时会获得2

setInterval用于间隔执行:

let x = 1;

var interval1 = setInterval(() => x++, 1000);

console.log(x);

若异步调用时，每个1秒会发现x增1

let a = 1;
	let timerId = setTimeout(function() {
		a++;
		console.log('inner:', a);
	},0);
	console.log('outer:', a);

有一些开发过程中的最佳实践：

1.setTimeout和setInterval的第一个参数不建议传递字符串，传递字符串和eval有一样的问题，会造成性能方面的问题，甚至引起安全问题。

　　2.建议用setTimeout模拟setInterval，不建议使用setInterval。页面中setTimeout和clearTimeout不配合使用基本上不会出现问题，因为setTimeout只执行一次，不会造成累加的问题，使用setInterval的话，强烈建议在适当时候使用clearInterval，在这种情况，很容易出现问题