三种定时器的使用

2022-03-31  本文已影响0人  心存美好
<!DOCTYPE HTML>
<html>

<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <meta name="keywords" content="关键词">
  <meta name="description" content="描述">
  <meta name="author" content="">
  <style>



  </style>
</head>

<body>


  <script>
    //  定时器的另种玩法
    let num = 10;
    let id = setInterval(function () {
      num--;
      console.log('num为' + num);
      if (num < 5) {
        clearInterval(id)//结束这个函数的执行
      }
    }, 1000)


    let num1 = 10;
    function aa() {
      num1--;
      console.log('num1为', num1);
      if (num1 < 5) {
        return;
      }
      setTimeout(aa, 1000)
    }
    setTimeout(aa, 1000)


    //浏览器提供的requestAnimationFrame函数,完美贴合浏览器的刷新频率
    //定时器不能完全贴合浏览器的刷新频率,不同浏览器刷新频率也是不一样的

    let num2 = 10;
    function bb() {
      num2--;
      console.log('requestAnimationFrame的num2为', num2);
      if (num2 < 5) {
        return;
      }
      requestAnimationFrame(bb)//写动画用
    }
    requestAnimationFrame(bb)
  </script>
</body>

</html>
上一篇 下一篇

猜你喜欢

热点阅读