JavaScript 之 定时器

　　JavaScript 里面有两个定时器：setTimeout() 和 setInterval() 。

　　区别：

　　　　setTimeout()：相当于一个定时炸弹，隔一段时间执行，并且只会执行一次就不在执行了。

　　　　setInterval()： 相当于一个闹钟，隔一段时间执行，并且会重复执行。

一、setTimeout()

　　1、设置定时器（倒计时）

　　　　语法格式：

setTimeout(function() {},时间)；

　　　　    这个函数需要两个参数：

　　　　　　第一个参数是到时间后需要执行的函数，可以是匿名函数，也可以是命名函数；

　　　　　　第二个参数是时间间隔，单位为毫秒（ms）。

　　　　Demo：

btn.onclick = function() {
  setTimeout(function(){
       alert("hello world");  
    },3000);  
}    

　　　　当点击按钮3秒后，页面弹出 “hello world” 的对话框。

　　2、取消定时器（倒计时）

　　　　语法格式：

var  timerId = setTimeout(function(){}, 时间间隔);
clearTimeout(timerId);

　　　　声明定时器时会有一个返回值，是一个整数，即当前这个定时器的 标识。

　　　  在执行 clearTimeout() 这个函数时，在里面传入对应的 定时器的标识 即可取消当前的定时器。

二、setInterval()

　　1、设置定时器

　　　　语法格式：

setInterval(function(){},时间间隔);

　　　　　这个函数需要两个参数：

　　　　　　第一个参数是到时间后需要执行的函数，可以是匿名函数，也可以是命名函数；

　　　　　　第二个参数是时间间隔，单位为毫秒（ms）。

　　2、取消定时器

　　　　　语法格式：

var  timerId = setInterval(function(){}, 时间间隔);
clearInterval(timerId);

　　　　  声明定时器时会有一个返回值，是一个整数，即当前这个定时器的 标识。

　　　  在执行 clearTimeout() 这个函数时，在里面传入对应的 定时器的标识 即可取消当前的定时器。

　　  Demo：距离2019年11月11日倒计时

 // 结构
 <h1 class="title">距离光棍节，还有</h1>
  
  <div class="time-item">
    <span><span id="day">00</span>天</span>
    <strong><span id="hour">00</span>时</strong>
    <strong><span id="minute">00</span>分</strong>
    <strong><span id="second">00</span>秒</strong>
  </div>

<script>
    // 目标时间
    var endDate = new Date('2019-11-11 0:0:0');
    // 获取 span
    var spanDay = document.getElementById('day');
    var spanHour = document.getElementById('hour');
    var spanMinute = document.getElementById('minute');
    var spanSecond = document.getElementById('second');

    countdown();
    setInterval(countdown, 1000);

    // 倒计时
    function countdown() {

      // 计算时间差
      // 当前时间
      var startDate = new Date();
      // 计算两个日期差
      var interval = getInterval(startDate, endDate);

      setInnerText(spanDay, interval.day);
      setInnerText(spanHour, interval.hour);
      setInnerText(spanMinute, interval.minute);
      setInnerText(spanSecond, interval.second);

    }
    
 // 获取两个日期的时间差
function getInterval(start, end) {
  // 两个日期对象，相差的毫秒数
  var interval = end - start;
  // 求 相差的天数/小时数/分钟数/秒数
  var day, hour, minute, second;

  // 两个日期对象，相差的秒数
  // interval = interval / 1000;
  interval /= 1000;

  day = Math.round(interval / 60 / 60 / 24);
  hour = Math.round(interval / 60 / 60 % 24);
  minute = Math.round(interval / 60 % 60);
  second = Math.round(interval % 60);

  return {
    day: day,
    hour: hour,
    minute: minute,
    second: second
  }
}

</script>