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