目录:
1.什么是定时器
2.setInterval、clearInterval、setTimeout的使用
一、什么是定时器
JavaScript 是单线程语言,但它允许通过设置超时值和间歇时间值来调度代码在特定的时刻执行。
二、setInterval、clearInterval、setTimeout的使用
1.setInterval
setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式。
setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作
语法:
setInterval(function, milliseconds)
code/function必需。要调用一个代码串,也可以是一个函数。
milliseconds必须。周期性执行或调用 code/function 之间的时间间隔,以毫秒计。
代码:每隔1000毫秒执行console.log(1)
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript">
setInterval(function(){
console.log(1)
},1000)
</script>
</body>
</html>
2.setTimeout
setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。
语法:
setTimeout(function, milliseconds)
代码:延迟执行,打开页面隔1000毫秒执行console.log(1)
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript">
setTimeout(function(){
console.log(1)
},1000)
</script>
</body>
</html>
这里可以看出来setInterval和setTimeout的区别了,setInterval是一直打印,setTimeout只是执行了一次
3.clearInterval
clearInterval() 方法可取消由 setInterval() 设置的 timeout。
clearInterval() 方法的参数必须是由 setInterval() 返回的 ID 值。
语法:
clearInterval(id_of_setinterval):id_of_setinterval 由 setInterval() 返回的 ID 值。
代码:面这个例子将每隔 50 毫秒调用 clock() 函数。您也可以使用一个按钮来停止这个 clock:
<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>