setTimeout和setInterval的区别

本文深入讲解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,在这种情况,很容易出现问题

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值