requestAnimationFrame、setTimeout、setInterval对比测试

羽筠

已于 2023-03-21 15:20:37 修改

阅读量552

点赞数

分类专栏： JS 文章标签： javascript html

于 2022-01-07 17:59:41 首次发布

本文链接：https://blog.csdn.net/qq_16494241/article/details/122369679

版权

JS 专栏收录该内容

72 篇文章 0 订阅

订阅专栏

PC端测试：相比之下setTimeout有延迟

手机上测试：相比之下setTimeout、setInterval都有延迟

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>requestAnimationFrame、setTimeout、setInterval对比测试</title>
</head>
<body>
  
  
  
  <div style="margin-bottom: 30px;border-bottom: #ddd solid 1px;">
    <p style="text-align: center;font-size: 36px;margin-bottom: 30px;">PC端测试：相比之下setTimeout有延迟</p>
    <p style="text-align: center;font-size: 36px;margin-bottom: 30px;">手机上测试：相比之下setTimeout、setInterval都有延迟</p>
    <button type="button" style="display: block;margin: 30px auto;font-size: 26px;">开始</button>
  </div>
  
  <script type="text/javascript">
    document.getElementsByTagName('button')[0].addEventListener('click',()=>{
      if((timing > 0 && curTime < 30) || (timeoutT > 0 && (timeoutT / 100) < 30) || (intervalT > 0 && (intervalT / 100) < 30)){
        return;
      }
      timing = 0; curTime = 0;
      countdownTime = 30 , countdownTiming = 0;
      changeTime();
      timeoutT = 0
      timeoutDo();
      intervalT = 0;
      intervalTimer = setInterval(timeDo,10);
    })
  </script>
  
  
  
  <div style="display: flex;justify-content: center; align-items: center;text-align: center;font-size: 36px;margin-bottom: 30px;">
    <span style="width: 460px;text-align: right;">requestAnimationFrame<br>（100ms执行一次）：</span>
    <span id="countdownTime" style="width: 240px;font-size: 70px;font-weight: bold;"></span>
  </div>
  <div style="display: flex;justify-content: center; align-items: center;text-align: center;font-size: 36px;margin-bottom: 30px;">
    <span style="width: 460px;text-align: right;">requestAnimationFrame<br>（100ms执行一次）：</span>
    <span id="countdownTiming" style="width: 240px;font-size: 70px;font-weight: bold;"></span>
  </div>
  <div style="display: flex;justify-content: center; align-items: center;text-align: center;font-size: 36px;margin-bottom: 30px;">
    <span style="width: 460px;text-align: right;">requestAnimationFrame<br>（1秒执行60次）：</span>
    <span id="raftime" style="width: 240px;font-size: 70px;font-weight: bold;"></span>
  </div>
  
  <script type="text/javascript">
    var timing = 0 , rafId , curTime = 0;
    var countdownTime = 30 , countdownTiming = 0;
    function changeTime(k){
      // console.log(k);
      if(!timing && k){
        timing = k
      }
      // 1秒执行60次
      rafId = requestAnimationFrame(changeTime);
      curTime = ((k - timing) / 1000).toFixed(2);
      document.getElementById('raftime').innerHTML = curTime;
      if(curTime >= 30){
        cancelAnimationFrame(rafId);
      }
      
      // 倒计时计算
      countdownTiming++;
      if(countdownTiming % 6 == 0){
        // 100ms执行一次
        countdownTime-= .1;
        countdownTime = countdownTime.toFixed(1);
        document.getElementById('countdownTime').innerHTML = countdownTime;
        document.getElementById('countdownTiming').innerHTML = (countdownTiming / 60).toFixed(1);
      }
      // if(countdownTime <= 0){
      //   cancelAnimationFrame(rafId);
      // }
    }
    // changeTime();
  </script>
  
  
  
  
  
  <div style="display: flex;justify-content: center; align-items: center;text-align: center;font-size: 36px;margin-bottom: 30px;">
    <span style="width: 460px;text-align: right;">setTimeout：</span>
    <span id="timeout" style="width: 240px;font-size: 70px;font-weight: bold;"></span>
  </div>
  <div style="display: flex;justify-content: center; align-items: center;text-align: center;font-size: 36px;margin-bottom: 30px;">
    <span style="width: 460px;text-align: right;">setInterval：</span>
    <span id="intervaltime" style="width: 240px;font-size: 70px;font-weight: bold;"></span>
  </div>
  
  <script type="text/javascript">
    var timeoutTimer,timeoutT = 0;
    function timeoutDo(){
      // console.log(timeoutT)
      timeoutT++;
      document.getElementById('timeout').innerHTML = (timeoutT / 100).toFixed(2);
      timeoutTimer = setTimeout(timeoutDo,10);
      if((timeoutT / 100) > 30){
        clearTimeout(timeoutTimer);
      }
    }
    // timeoutDo();
    
    var intervalTimer,intervalT = 0;
    function timeDo(){
      // console.log(intervalT)
      intervalT++;
      document.getElementById('intervaltime').innerHTML = (intervalT / 100).toFixed(2);
      if((intervalT / 100) > 30){
        clearTimeout(intervalTimer);
      }
    }
    // intervalTimer = setInterval(timeDo,10);
  </script>
  
  
  
</body>
</html>