setTimeout定时器以及部分小知识点

##setTimeout定时器
####难点：

1. 按固定格式输出（hh:mm:ss）

2. 开始，暂停，开始

3. 解决多次点击开始会使定时器速度加快的问题
   ####1. 按固定格式输出
   function formatNumber(num) {
   return num < 10 ? ‘0’ + num : num;
   }
   思路：在每次输出之前格式化一下数据，使用三元运算符，如果小于10就在前面补0。
   ####2. 开始，暂停，开始
   var flag = 1;
   function Timer() {
   flag = 1;
   if (flag == 1) {
   if (sec <= 59 && sec >= 0 && min <= 59 && min >= 0 && hou <= 59 && hou >= 0) {
   document.getElementById(‘showTime’).innerHTML = formatN(hou) + “:” + formatN(min) + “:” + formatN(sec);
   sec = sec + 1;
   } else if (min <= 59 && min >= 0 && hou <= 59 && hou >= 0) {
   min = min + 1;
   sec = 0;
   } else if (hou <= 59 && hou >= 0) {
   hou = hou + 1;
   min = 0;
   sec = 0;
   }
   window.timer = setTimeout(“Timer()”, 1000);
   }
   }

   function stop() {
   clearTimeout(timer);
   flag = 0;
   }
   思路：加一个标记flag，开始执行之后改变flag为原来的值并启动定时器，暂停的时候改变flag的值。
   ####3. 解决多次点击开始会使定时器速度加快的问题
   #####出现这个问题的原因：
   假如你在0时刻点击了一下按钮，那么500ms时数字会跳一下，1000ms会再跳一下，依次类推，1500，2000，2500…的时候都会跳一下，时间间隔始终是500ms，但是，假如你在300ms的时候又点击了一下按钮，那么800ms的时候数字就会跳一下，1300，1800，2300…的时侯都会跳一下，那么现在看0到2000ms之间，300，500，800，1000，1300，1500，1800，2000时刻时数字都会跳一下，数字变化的时间间隔自然会变小，同理，你点击的次数越多，时间间隔就会越小。
   #####解决方案：
   每次启动定时器的时候先清一下定时器（clearTimeout()）,此时会有另一个问题，先清定时器会报错：定时器未定义，解决方法是：

   if(window.t) clearTimeout(window.t);
   window.t = setTimeout(… );
   window上即使未定义也不会报错。
   ###完整代码：

   setTimeout实现计时器

###运行结果：

新博客地址：http://www.caomage.com