JS中的setTimeout与setInterval

定时器

1.两种定时器

window 对象给我们提供了两个非常好用的方法-定时器

seTimeout()
setInterval()

(1)setTimeout()定时器

window.setTimeout(调用函数,[延迟毫秒数]);

setTimeout()方法用于设置一个定时器，该定时器在定时器到期后执行调用函数

 <script>
    // 1.setTimeout
    // 语法规范： window.setTimeout(调用函数，延时事件);
    // 1.这个window在调用的时候可以省略
    // 2.这个延时事件单位是毫秒 但是可以省略，如果省略默认的是0
    // 3.这个调用函数可以直接写函数 还可以写 函数名 还有一个写法'函数名()'
    // 4.页面中可能有很多的定时器，我们经常给定时器加标识符(名字)
    // setTimeout(function () {
    //   console.log('时间到了');
    // }, 2000)
    function callback() {
      console.log('爆炸了');
    }
    var time1 = setTimeout(callback, 3000);
    var time2 = setTimeout('callback()', 5000);   // 不提倡这个写法

(3)回调函数

setTimeout() 这个调用函数我们也称为回调函数callback

普通函数时按照代码顺序直接调用

而这个函数，需要等待时间，时间到了采取调用这个函数，因此称为回调函数。

简单理解：回调，就是回头调用的意思，上一件事干完，在回头再调用这个函数。

(4)停止setTimeout

window.clearTimeout(timeoutID)

clearTimeout()方法取消了先前通过调用setTimeout()建立的定时器

注意:

window可以省略
里面的参数就是定时器的标识符.

(1)setInterval()定时器

window.setInterval(回调函数,[间隔的时间毫秒数]);

setInterval()方法重复调用一个函数，每隔这个事件，就去调用一次函数。

// 1.setInterval
    // 语法规范：window.setInterval(调用函数，延时时间);
    setInterval(function () {
      console.log('继续输出');
    }, 1000)
    // 2.setTimeout  延时时间到了，就去调用这个歌回调函数，只调用一次 就结束了这个定时器
    // 3.setInterval 每隔这个延时时间，就去调用这个回调函数，会调用很多次，重复调用这个代码

(2)倒计时案例

// 案例分析
    // 1.这个倒计时是不断变化的，因此需要定时器来自动变化(setInterval)
    // 2.三个黑色盒子连分别存放时分秒
    // 3.三个黑色盒子利用innerHTML放入计算的小时分钟描述
    // 4.第一次执行也是间隔毫秒数，因此刚刷新页面会有空白
    // 5.最好采用封装函数的方式，这样可以先调用一次这个函数，防止刚开始刷新页面有空白问题


    // 1.获取元素
    var hour = document.getElementById('h');
    var minute = document.getElementById('m');
    var second = document.getElementById('s');
    var inputTime = +new Date('2022-2-27 15:00:00'); // 返回的是用户输入时间总的毫秒数
    console.log(inputTime);
    // 2.开启定时器
    conutDown();  // 先调用一次这个函数，防止第一次刷新页面有空白
    setInterval(conutDown, 1000);

    function conutDown() {
      var nowTime = +new Date() // 返回的是当前时间总的毫秒数
      var times = (inputTime - nowTime) / 1000; // time是剩余时间总的秒数
      var h = parseInt(times / 60 / 60 % 24);     // 时
      h = h < 10 ? 0 + h : h;
      hour.innerHTML = h;     // 把剩余的小时给 小时盒子
      var m = parseInt(times / 60 % 60);       // 分
      m = m < 10 ? 0 + m : m;
      minute.innerHTML = m;    // 把剩余的分钟给 分钟盒子
      var s = parseInt(times % 60);            // 当前的秒
      s = s < 10 ? 0 + s : s;
      second.innerHTML = s;    // 把剩余的秒给 秒盒子
    }

(3)停止 setInterval()定时器

window.clearInterval(intervalID);

clearInterval()方法取消了先前通过调用 setInterval() 建立的定时器。

注意：

window可以省略
里面的参数就是说定时器的标识符。

(4)开启和停止定时器案例

<body>
  <button class="begin">开启定时器</button>
  <button class="stop">关闭定时器</button>
  <script>
    var begin = document.querySelector('.begin');
    var stop = document.querySelector('.stop');
    var timer = null;  // 全局变量  null是个空对象
    begin.addEventListener('click', function () {
      timer = setInterval(function () {
        console.log('你好');
      }, 1000)
    })
    stop.addEventListener('click', function () {
      clearInterval(timer);
    })
  </script>
</body>

(5)发送短信倒计时案例

<body>
  手机号码: <input type="number" name="" id=""> <button>发送</button>
  <script>
    // 1.按钮点击之后，会禁用disabled为true
    // 2.同时按钮里面的内容会变化，注意button里面的内容通过innerHTML修改
    // 3.里面秒数是有变化的，因此需要用到定时器
    // 4.定义一个变量，在定时器里面，不断递减
    // 5.如果变量为0 说明到了时间，我们需要停止定时器，并且复原按钮初始状态
    var btn = document.querySelector('button');
    var time = 10; // 定义剩下的秒数
    btn.addEventListener('click', function () {
      btn.disabled = true;
      var timer = setInterval(function () {
        if (time == 0) {
          // 清除定时器和复原按钮
          clearInterval(timer);
          btn.disabled = false;
          btn.innerHTML = '发送';
          time = 10;     // 这个10需要重新开始
        } else {
          btn.innerHTML = '还剩下' + time + '秒';
          time--;
        }
      }, 1000)
    })
  </script>
</body>