定时器以及this指向问题

最新推荐文章于 2022-07-03 10:42:35 发布

清晨投递

最新推荐文章于 2022-07-03 10:42:35 发布

阅读量589

点赞数

分类专栏： javaScript 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/weixin_51244384/article/details/122480916

版权

javaScript 专栏收录该内容

30 篇文章 1 订阅

订阅专栏

定时器（两种）

概述：window 对象提供了2个非常好用的方法 —— 定时器

（1）setTimeout（）

（2）setLnterval（）

setTimeout() 定时器

开启定时器

window.setTimeout(调用函数 , 延迟的毫秒数); // '延迟的毫秒数' 后执行

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

注意：

（1）window 可以省略。

（2）调用函数可以直接写函数，或者写函数名或者采取字符串‘函数名()’三种形式，字符串形式不推荐。

（3）延迟的毫秒数省略默认是0，如果写，必须是毫秒。

（4）定时器可能很多，所以经常给定时器赋值一个标识符。

普通函数是按代码顺序执行。

回调，就是回头调用的意思。上一件事情干完，再回头调用这个函数。

例如：定时器的调用函数、事件处理函数也是回调函数。

  <script>
    // window可以省略
    // 调用函数写匿名函数
    window.setTimeout(function () {
      console.log(0);
    }, 1000)
    // 调用函数写有函数名函数
    setTimeout(fn, 1000);
    function fn() {
      console.log(1);
    }

    // 给定时器赋值标识符
    var timer = setTimeout(fn, 1000)
  </script>

案例：5秒后关闭广告

<body>

  <img src="./images/img.png" alt="">
  <script>
    // 获取图片
    var img = document.querySelector('img');
    // 设置定时器
    setTimeout(function () {
      // 样式设置display:none;
      img.style.display = 'none';
    }, 5000)
    // 延迟5秒

  </script>
</body>

效果：

关闭定时器

window.clearTimeout(timeoutID);

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

注意：

（1）window 可以省略。

（2）里面的参数就是定时器的标识符。

<body>
  <button>停止定时器</button>
  <script>
    var btn = document.querySelector('button');
    // 给定时器赋值标识符
    var timer = setTimeout(function () {
      console.log('timer');
    }, 2000)

    btn.onclick = function () {
      clearTimeout(timer);
    }
  </script>
</body>

setLnterval() 定时器

开启定时器

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

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

注意：

（1）window 可以省略。

（2）这个调用函数直接写函数，或者写函数名或者采取字符串' 函数名() '三种形式.

（3）间隔的毫秒数省略默认是0，如果是，必须是毫秒，表示每隔多少毫秒就自动调用这个函数。

（4）因为定时器可能有很多，所以我们经常给定时器赋值一个标识符。

（5）第一次执行也是间隔毫秒数之后执行，之后每隔毫秒数就执行一次。

  <script>
    // 每隔1秒执行一次
    setInterval(function () {
      console.log(0);
    }, 1000);
  </script>

案例倒计时

  <style>
    div {
      float: left;
      width: 50px;
      height: 70px;
      line-height: 70px;
      text-align: center;
      color: aliceblue;
      font-size: 30px;
      font-weight: 600;
      background-color: pink;
      margin-right: 5px;
    }
  </style>
  <script>
    window.onload = function () {
      var hour = document.querySelectorAll('div')[0];
      var minute = document.querySelectorAll('div')[1];
      var second = document.querySelectorAll('div')[2];
      var t = '2022-1-13 21:00:00';

      Time(); // 解决刷新后一秒空白的问题,现在定时器调用前调用Time函数。

      setInterval(Time, 1000)
      function Time() {
        var inputTime = +new Date(t); // 用户输入时间毫秒
        var nowTime = +new Date(); // 总毫秒数
        var times = (inputTime - nowTime) / 1000; //  用户输入毫秒 - 总毫秒 = 剩下毫秒 注意毫秒要化为秒

        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;
      }
    }
  </script>
</head>

<body>
  <p>距离2022/1/13/21:00还有：</p>
  <div>1</div>
  <div>2</div>
  <div>3</div>
</body>

效果：

关闭定时器

window.clearInterval(intervalID);

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

注意：

（1）window 可以省略。

（2）里面的参数是定时器的标识符

案例：发送短信倒计时

<body>
  <button>发送</button>
  <script>

    var btn = document.querySelector('button');
    // 计数器,定义剩下的秒数
    var count = 2;
    // 添加点击事件
    btn.onclick = function () {
      // btn禁用状态
      btn.disabled = true;
      btn.innerHTML = count;
      var timer = setInterval(function () {
        // 判断计数器是否小于0
        if (count <= 0) {
          // btn可点击状态
          btn.disabled = false;
          btn.innerHTML = '发送';
          // 重置计数器
          count = 2;
          // 关闭定时器
          clearInterval(timer);
        } else {
          count--;
          btn.innerHTML = count;
        }
      }, 1000)
    }
  </script>
</body>

效果图：

this指向问题

this的指向在函数定义的时候是确定不了的，只有函数执行的时候才能确定this到底指向谁，一般情况下this的最终指向的是那个调用的对象。

现阶段，先了解几个this指向

（1）全局作用域或者普通函数中this指向全局对象window（注意定时器里面的this指向window）

（2）方法调用中谁调用指向谁。

（3）构造函数中this指向构造函数的实例。

<body>
  <button>点击</button>
  <script>
    // 1、指向window
    console.log(this);
    function fn() {
      console.log(this);
    }
    fn();

    setTimeout(function () {
      console.log(this);
    });

    // 2、this指向调用者
    // 指向btn按钮
    var btn = document.querySelector('button');
    btn.onclick = function () {
      console.log(this);
    }
    // 指向o这个对象
    var o = {
      sayHi: function () {
        console.log(this);
      }
    }
    o.sayHi();

    // 3、构造函数
    // 指向实例化对象
    function Fn() {
      console.log(this);
    }

    var fn = new Fn();
  </script>
</body>

清晨投递

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
定时器以及this指向问题

定时器（两种）概述：window 对象提供了2个非常好用的方法 —— 定时器（1）setTimeout（）（2）setLnterval（）setTimeout() 定时器开启定时器window.setTimeout(调用函数 , 延迟的毫秒数); // '延迟的毫秒数' 后执行setTimeout() 这个调用函数也称为回调函数callback注意：（1）window 可以省略。（2）调用函数可以直接写函数，或者写函数名或者采取字符串‘函数名()’三种形式..
复制链接

扫一扫