还是大剑师兰特：曾是美国某知名大学计算机专业研究生，现为航空航海领域高级前端工程师；CSDN知名博主，GIS领域优质创作者，深耕openlayers、leaflet、mapbox、cesium，canvas，webgl，echarts等技术开发，欢迎加底部微信（gis-dajianshi），一起交流。

文章目录

• • 一、setTimeout
  • 二、setInterval
  • 三、requestAnimationFrame
  • 四、区别
  • 五、结论

    ---

    一、setTimeout

    setTimeout 是 JavaScript 中的一个全局函数，用于在指定的毫秒数后调用一个函数或执行一段代码。此函数返回一个 ID，可用于清除定时器（通过调用 clearTimeout 函数）。

    function delayedAlert() {
      alert('This was delayed by 2 seconds!');
    }
    let timeoutId = setTimeout(delayedAlert, 2000);
    // 可以在任何时间取消定时器
    clearTimeout(timeoutId);
    

    • 详解：

      • setTimeout(func, delay[, arguments]) 接收两个主要参数：要执行的函数和延迟时间（单位为毫秒）。
      • 当指定的延迟时间过去后，指定的函数会被添加到浏览器的事件队列中等待执行，但并不能保证函数会在精确的延迟时间后立即执行，因为浏览器还需要处理其他事件和任务。
      • 如果在超时之前又有其他更高优先级的任务（如用户交互或其他的定时器任务），那么该函数的实际执行时间可能会比预期更晚。

      • 应用场景：

        • 超时控制，如登录界面自动跳转、提示信息延迟显示、页面加载后的初始化延迟等。
        • 异步编程，模拟异步流程控制。

          ---

          二、setInterval

          setInterval 类似于 setTimeout，但它会每隔指定的毫秒数重复调用一个函数，直到被手动停止。

          function repeatedAlert() {
            alert('This is repeating every 2 seconds!');
          }
          let intervalId = setInterval(repeatedAlert, 2000);
          // 可以在任何时候停止定时器
          clearInterval(intervalId);
          

          • 详解：

            • setInterval(func, delay[, arguments]) 同样接收两个主要参数，但会周期性地调用函数。
            • 同样受事件队列的影响，连续的执行之间可能存在额外的延迟，且若某个周期内的函数执行尚未完成，下一个周期可能不会等待前一个周期结束就开始计时。

            • 应用场景：

              • 定时更新，如实时数据显示、游戏循环、滚动新闻条等需要定期执行的任务。

                ---

                三、requestAnimationFrame

                requestAnimationFrame 是专门针对网页动画的一种高级API，它告诉浏览器你希望执行一个动画，并请求浏览器在下次重绘之前调用指定的回调函数。

                function animate(currentTime) {
                  // 动画代码，currentTime 参数表示当前时间点
                  // ...
                  // 请求下一帧动画
                  requestAnimationFrame(animate);
                }
                // 开始动画
                requestAnimationFrame(animate);
                

                • 详解：

                  • requestAnimationFrame(callback) 接收一个回调函数作为参数，这个函数会在浏览器下一次重绘之前调用。
                  • 使用 requestAnimationFrame 有助于实现平滑且与浏览器渲染帧率同步的动画，因为它会根据显示器的刷新率调整执行时间，确保动画流畅，同时节省系统资源。
                  • 回调函数通常会收到一个参数，即当前时间戳，用于计算动画每一帧的变化。

                  • 应用场景：

                    • 高性能网页动画，如CSS变换、canvas绘制、SVG动画等需要与浏览器渲染同步的视觉变化。
                    • 优化页面性能，避免过度渲染导致性能下降。

                      ---

                      四、区别

                      1. 执行时机：

                         • setTimeout 和 setInterval 按照指定的固定时间间隔执行。
                         • requestAnimationFrame 根据浏览器的刷新频率动态调整执行时间，以保持与屏幕刷新同步。

                         • 重复性：

                           • setTimeout 是一次性执行，除非在回调函数内部再次调用自己。
                           • setInterval 会一直重复执行，除非被显式清除。
                           • requestAnimationFrame 也是重复执行，但每次执行都需要在回调函数内部重新请求。

                           • 性能和准确性：

                             • setTimeout 和 setInterval 不太适合复杂的动画，可能导致动画卡顿、不准确。
                             • requestAnimationFrame 更适合处理视觉动画，因为它与屏幕刷新同步，有助于减少丢帧现象，提高动画质量。

                      ---

                      五、结论

                      在实现动画或周期性任务时，应优先考虑使用 requestAnimationFrame，因为它能更好地适应各种设备的刷新率，实现更流畅的动画效果。而对于非视觉相关的简单延时任务或固定间隔任务，setTimeout 和 setInterval 更为合适，但需要注意它们的时间精度问题，并合理控制任务执行以防止阻塞UI线程。

                       
                       网页设计常用软件  潍坊网站制作  德阳seo  中小型企业网络建设方案  动态网页设计与制作教程  本溪seo优化