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,在这种情况,很容易出现问题

### JavaScript `setTimeout` `setInterval` 的区别 #### 定义与基本功能 `setTimeout` 函数用于设置一个定时器,在指定的时间延迟后执行一次给定的回调函数。一旦触发,该操作仅发生一次。 ```javascript const timeoutId = setTimeout(() => { console.log('This will log after 2 seconds'); }, 2000); ``` 相比之下,`setInterval` 则会按照设定的时间间隔重复调用所提供的回调函数,直到 clearInterval 被显式调用来停止它[^1]。 ```javascript const intervalId = setInterval(() => { console.log('This logs every second'); }, 1000); // Stop logging after five iterations. setTimeout(() => {clearInterval(intervalId)}, 5000); ``` #### 使用场景差异 当只需要延时一段时间后再做某事时,应优先考虑使用 `setTimeout` 。而如果希望定期执行某些任务,则更适合采用 `setInterval` 方法来实现周期性的行为。 需要注意的是,由于浏览器环境下的单线程特性以及事件驱动机制的影响,实际运行过程中可能会存在一定的偏差。因此对于精确度要求较高的计时需求来说,可能还需要额外处理以确保准确性。 #### 清除定时器 无论是哪种类型的定时器,都可以通过对应的清除方法提前终止其工作: - 对于由 `setTimeout` 创建的一次性定时器,可以利用返回值作为参数传递给 `clearTimeout()` 来取消即将发生的动作; - 同样地,针对持续不断的 `setInterval` ,则需借助 `clearInterval()` 达到相同的效果。 ```javascript let timer; if (someCondition) { // Set up either a one-time or repeating action... timer = someBoolean ? setInterval(doSomething, delayMs) : setTimeout(doSomethingOnce, delayMs); } else { // ...and later clear whichever was set above. typeof timer === 'number' && (someBoolean ? clearInterval(timer) : clearTimeout(timer)); } ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值