【BOM】定时器

最新推荐文章于 2022-04-16 15:54:48 发布

詹姆斯.旭

最新推荐文章于 2022-04-16 15:54:48 发布

阅读量196

点赞数

分类专栏：前端文章标签： javascript dom

本文链接：https://blog.csdn.net/weixin_45321793/article/details/113654476

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一、执行一次的定时器

1、语法：
window.setTimeout(函数, 时间);

2、说明
- window可以省略
- 这个调用函数可以直接写函数，或者函数名
- 时间的单位是毫秒
- 因为定时器一般有很多，所以我们一般给定时器赋值一个标识符

3、案例：2秒后控制台输出时间到了

//写法一：直接将函数写到新参位置
var timer = setTimeout(function(){
    console.log("时间到了")
}, 2000);

//写法二：也可以将函数声明到外面，将函数名传入即可
function fun(){
    console.log("时间到了");
}
var timer = setTimeout(fun, 2000)

4、如何关闭定时器
clearTimeout(定时器名字);

//关闭了上面的定时器（可以给按钮绑定单击事件，只要在两秒内点击，控制台就不会输出时间到了）
clearTimeout(timer);

二、重复执行的定时器

1、语法
window = setInterval(函数, 时间)

2、说明
- window可以省略
- 这个调用函数可以直接写函数，或者函数名
- 时间的单位是毫秒
- 因为定时器一般有很多，所以我们一般给定时器赋值一个标识符

3、案例(每个2秒控制台输出滴滴滴)

//写法一
var timer = setInterval(function(){
	console.log("滴滴滴");
}, 2000)

//写法二
function fun(){
	console("滴滴滴");
}
var timer = setInterval(fun, 2000);

4、如何关闭
clearInterval(定时器名字)

//关闭以上定时器
clearInterval(timer);

三、案例

点击开始按钮控制台每隔2秒重复输出我爱你，点击停止按钮停止输出

<body>
		<button id="btn1">开始</button>
		<button id="btn2">停止</button>
<body>

<script type="text/javascript">
				
        //获取开始按钮
        var btn1 = document.getElementById("btn1");
        var btn2 = document.getElementById("btn2");

        var timer = null;
        //点击开始绑定事件
        btn1.onclick = function(){
            timer = setInterval(function(){
                console.log("我爱你");
            }, 2000)
        }

		//点击停止后事件
        btn2.onclick = function(){
            clearInterval(timer);
        }
					
<script>

四、补充

上述定时器中的调用函数我们也称为回调函数 callback

需要等待时间，时间到了才回去调用这个函数，因此称为回调函数

詹姆斯.旭

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【BOM】定时器

目录一、执行一次的定时器二、重复执行的定时器三、案例四、补充JS中的定时器分为两类：一类是计时结束执行一次的计时器，一类是每隔指定时间执行一次的计时器一、执行一次的定时器1、语法：window.setTimeout(函数, 时间);2、说明- window可以省略- 这个调用函数可以直接写函数，或者函数名- 时间的单位是毫秒- 因为定时器一般有很多，所以我们一般给定时器赋值一个标识符3、案例：2秒后控制台输出时间到了//写法一：直接将函数写到新参位置var timer = se
复制链接

扫一扫