在定时器中返回给视图的值_JavaScriptBOM_定时器(二十二)

4b6b72fb4dd1e98a8609f00acce462f6.png

目录:

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>

下节预告:数组_创建数组_一维数组_length

参考视频教程:

JavaScript从0基础到实战案例以及完成效果全套视频课程-三人行慕课​www.3mooc.com
36ca6dd0567c64a905f813a5cf85e8a3.png
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值