<div>当前时间为:<span id="timeNow"></span> </div>
<button id="timeBegin">计时开始</button>
<button id="timeEnd">计时结束</button>
<button id="timeClear">计时清除</button>
// Javascript
<script type="text/javascript">
//定义初始值 计时器
var count = 0
var timer = ""
//开始计时
function BeginTime(){
var beginBtn = document.getElementById("timeBegin")
beginBtn.onclick = function(){
timer = setInterval(function(){
count ++
document.getElementById("timeNow").innerHTML = count / 100
},10)
}
}
//结束计时
function EndTime(){
var endBtn = document.getElementById("timeEnd")
endBtn.onclick = function(){
clearInterval(timer)
}
}
//计时清除
function ClearTime(){
var clearBtn = document.getElementById("timeClear")
clearBtn.onclick = function(){
document.getElementById("timeNow").innerHTML = ""
}
}
BeginTime()
EndTime()
ClearTime()
</script>
// The Harder You Work, The Luckier You Will Be. （Jensonhui.com）
原本我们若想将一个定时器暂停或清除，我们通常会用clearInterval()的方法。我们在setInterval时存储这个Interval的id，之后再需要暂停时通过id查找并清除该定时器（甚至需要记录请出时变化的数据），等到需要定时器继续运转我们就setInterval()在创建一次。
本次在大量使用定时器的过程中，为了优化繁琐的操作，我给定时器内部回调函数添加了数据驱动， 每个操作对应 一个常驻定时器 ， 只在页面初始化时创建一次定时器，后续不再重新创建或释放
接下来我会举几个本次做的例子：
如果我们用传统释放定时器的方式，那么释放时我们还需记录运行时间，当前状态等。重新创建我们还需要把记录的值传递进去，不甚繁琐。
以上两个例子就是本次思想的精髓， 之后准备二次封装一个新的定时器，敬请期待
做完了： 数据驱动二次封装定时器工具类
球球你们看完点个赞吧。
