2、清除定时器
3、例如: 过一秒钟 在控制台上打印出 一个数字 比如1,再过一秒钟 打印出2 ....,点击清除定时器 终止打印 。
4、 setTimeout 和 setInterval的区别是:
5、 sessionStorage 存储之后 页面刷新 缓存的值不会消失, 但是 把tab页 或者叫 会话 关闭之后,缓存的值就不存在了。
6、 localStorage会一致存储在本地,会话或者tab页关闭也不会消失 ;
localStorage是和地址有关系的,地址改变了,localStorage里面的值就不存在了;
前面地址没有发生改变的话,localStorage依然存在 ,虽然页面改变了;
原本我们若想将一个定时器暂停或清除,我们通常会用clearInterval()的方法。我们在setInterval时存储这个Interval的id,之后再需要暂停时通过id查找并清除该定时器(甚至需要记录请出时变化的数据),等到需要定时器继续运转我们就setInterval()在创建一次。
本次在大量使用定时器的过程中,为了优化繁琐的操作,我给定时器内部回调函数添加了数据驱动, 每个操作对应 一个常驻定时器 , 只在页面初始化时创建一次定时器,后续不再重新创建或释放
接下来我会举几个本次做的例子:
如果我们用传统释放定时器的方式,那么释放时我们还需记录运行时间,当前状态等。重新创建我们还需要把记录的值传递进去,不甚繁琐。
以上两个例子就是本次思想的精髓, 之后准备二次封装一个新的定时器,敬请期待
做完了: 数据驱动二次封装定时器工具类
球球你们看完点个赞吧。
//试试这个吧<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="time"></div>
<script>
<!--
var maxtime = 60*60 //一个小时,按秒计算,自己调整!
function CountDown(){
if(maxtime>=0){
minutes = Math.floor(maxtime/60)
seconds = Math.floor(maxtime%60)
minutes = minutes>=10?minutes:'0'+minutes
seconds = seconds>=10?seconds:'0'+seconds
msg = "距离结束还有"+minutes+"分"+seconds+"秒"
document.all["time"].innerHTML=msg
if(maxtime == 5*60) alert('注意,还有5分钟!')
--maxtime
}else{
clearInterval(timer)
alert("时间到,结束!")
}
}
timer = setInterval("CountDown()",1000)
//-->
</script>
</body>
</html>