JS的定时器

JS中的定时器有两种,分别是Interval和setTimeout。

1 Interval的开启和关闭

  1. 开启setInterval(函数,时间)
    按照指定的周期(以毫秒计)来调用函数或计算表达式。方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭。换句话说,创建定时器的每隔指定时间就自动调用指定的函数,返回一个定时器对象。

    案例1:隔1秒打印一个hello,world

    num=1
    //此处函数叫匿名函数
    t1=setInterval(function(){
    	console.log('hello,world'+num)
    	num++
    },1000)
    

    效果如图:
    在这里插入图片描述

    案例2:创建一个小盒子,使小盒子匀速移动
    这是创建盒子代码,并给盒子一些样式方便观察,写在body里面。

    <div id="box" style="background-color: green;width: 80px;height: 80px;position: absolute;top: 10px;"></div>
    

    找到盒子的id,修改它的样式,将top重新赋值,每隔100ms重新执行一次函数,实现小盒子向下移动的操作。写在script里面。

    //让方块移动
    top1=10
    t2=setInterval(function(){	
    	top1+=1		
    	document.getElementById('box').style.top=top1+'px'		
    },100)
    

    案例3:盒子增大
    创建一个盒子,给盒子一些样式,方便观察。

    <div id="box1" style="background-color: red;width: 20px;height: 20px;position: absolute;top: 100px;left: 400px;"></div>
    

    每隔100ms,重新执行函数,将id为box1的div盒子的宽度和高度重新赋值,实现逐渐增大的效果。代码写在script里面。

    width1=20
    height1=20
    setInterval(function(){
    	width1+=1
    	height1+=1
    	document.getElementById('box1').style.width=width1+'px'
    	document.getElementById('box1').style.height=height1+'px'
    },500)
    
  2. clearInterval(定时器对象)
    清除定时器,在执行一个事件的时候,关闭setInterval定时器,定时器对象如案例2的t2,将定时器保存为t2。

    clearInterval(t2)
    

2 Timeout定时器

在指定的毫秒数后调用函数或计算表达式。(相当于定时炸弹)换句话说,执行一个事件时(点击),等指定的时间过去(1s),执行该函数,执行完毕该函数自动关闭。

setTimeout(function(){
		console.log('hello')
	},1000)
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值