(二十五) 新兴的API

最新推荐文章于 2022-06-06 15:57:09 发布

luckybing~

最新推荐文章于 2022-06-06 15:57:09 发布

阅读量160

点赞数

分类专栏： javascript高级程序设计

本文链接：https://blog.csdn.net/Luckyzhoufangbing/article/details/105902709

版权

javascript高级程序设计专栏收录该内容

21 篇文章 0 订阅

订阅专栏

1. requestAnimationFrame

requestAnimationFrame最大的优势是由系统来决定回调函数的执行时机。具体一点讲，如果屏幕刷新率是60Hz,那么回调函数就每16.7ms被执行一次，如果刷新率是75Hz，那么这个时间间隔就变成了1000/75=13.3ms，换句话说就是，requestAnimationFrame的步伐跟着系统的刷新步伐走。它能保证回调函数在屏幕每一次的刷新间隔中只被执行一次，这样就不会引起丢帧现象，也不会导致动画出现卡顿的问题。

requestAnimationFrame 可以把它理解成一个与浏览器重绘频率相同的定时器

如果你想在浏览器重绘之前继续执行下一次动画，需要在函数内部再次调用requestAnimationFrame

<body>
  <div id="myDiv" style="background-color: lightblue;width: 0;height: 20px;line-height: 20px;">0%</div>
  <button id="btn">run</button>
  <script>
    var timer;
    btn.onclick = function(){
      myDiv.style.width = '0';
      // requestAnimationFrame 返回一个id 用于清除这个定时器 
      timer = requestAnimationFrame(function fn(){
          if(parseInt(myDiv.style.width) < 500){
              myDiv.style.width = parseInt(myDiv.style.width) + 5 + 'px';
              myDiv.innerHTML = parseInt(myDiv.style.width)/5 + '%';
              timer = requestAnimationFrame(fn);
          }else{
              cancelAnimationFrame(timer);
          }    
      });
  }
  </script>
</body>

requestAnimationFrame()只执行一次想要重复执行需要再次调用~

2. 地理定位

navigator.geolocation.getCurrentPosition

navigator.geolocation.watchPosition 监听参数与getCurrentPosition 相同

<script>
    // 成功回调函数
    function success (position) {
      console.log(position)
    }
    // 失败回调函数
    function error (error) {
      console.log(error)
    }
    // 一些配置对象
    let Object = {
      enableHighAccuracy: true, // 是否要求高精度的地理位置信息
      timeout: 5000, // 对地理位置信息的获取操作做超时限制，如果再该事件内未获取到地理位置信息，将返回错误
      maximumAge: 25000 // 设置缓存有效时间，在该时间段内，获取的地理位置信息还是设置此时间段之前的那次获得的信息，超过这段时间缓存的位置信息会被废弃
    }
    navigator.geolocation.getCurrentPosition(success, error,Object)
  </script>