requestAnimationFrame 控制速度模拟setinterval

封装方法：

     var requestInterval = function (fn, delay) {
        var requestAnimFrame = (function () {
            return (
              window.requestAnimationFrame ||
              function (callback, element) {
                window.setTimeout(callback, 1000 / 60);
              }
            );
          })(),
          start = new Date().getTime(),
          handle = {};
        function loop(timeSpan) {
          handle.value = requestAnimFrame(loop);
          var current = new Date().getTime(),
            delta = current - start;
          if (delta >= delay) {
            fn.call(this,timeSpan);
            start = new Date().getTime();
          }
        }
        handle.value = requestAnimFrame(loop);
        return handle;
      };

调用：

      requestInterval((...args) => {
        const element = document.getElementById("test");
        console.log(...args);
      }, 1000);

停止：

cancelAnimationFrame(timer.value);

可以封装停止方法：

var clearRequestInterval = function (handle) {
        window.cancelAnimationFrame
          ? window.cancelAnimationFrame(handle.value)
          : window.webkitCancelAnimationFrame
          ? window.webkitCancelAnimationFrame(handle.value)
          : window.webkitCancelRequestAnimationFrame
          ? window.webkitCancelRequestAnimationFrame(
              handle.value
            ) /* Support for legacy API */
          : window.mozCancelRequestAnimationFrame
          ? window.mozCancelRequestAnimationFrame(handle.value)
          : window.oCancelRequestAnimationFrame
          ? window.oCancelRequestAnimationFrame(handle.value)
          : window.msCancelRequestAnimationFrame
          ? window.msCancelRequestAnimationFrame(handle.value)
          : clearInterval(handle);
      };

参考：

https://blog.csdn.net/cunqu9743/article/details/106998768/