getBoundingClientRect 和 requestAnimFrame 的polyfill

getBoundingClientRect 和 requestAnimFrame 的polyfill
强烈推介IDEA2021.1.3破解激活,IntelliJ IDEA 注册码,2021.1.3IDEA 激活码  

大家好,我是架构君,一个会写代码吟诗的架构师。今天说一说getBoundingClientRect 和 requestAnimFrame 的polyfill,希望能够帮助大家进步!!!

概述

今天在项目中用到了 getBoundingClientRect 和 requestAnimFrame ,查了下它们的polyfill,记录下来,供以后开发时参考,相信对其他人也有用。

getBoundingClientRect

getBoundingClientRect 的 polyfill如下所示:

getBoundingClientRect(element) {
  const rect = element.getBoundingClientRect();

  // whether the IE version is lower than 11
  const isIE = navigator.userAgent.indexOf('MSIE') !== -1;

  // fix ie document bounding top always 0 bug
  const rectTop = isIE && element.tagName === 'HTML'
    ? -element.scrollTop
    : rect.top;

  return {
    left: rect.left,
    top: rectTop,
    right: rect.right,
    bottom: rect.bottom,
    width: rect.right - rect.left,
    height: rect.bottom - rectTop,
  };
}

requestAnimFrame

requestAnimFrame 的 polyfill如下所示:

polyfillRAF() {
  let requestAnimFrame = window.requestAnimationFrame
    || window.webkitRequestAnimationFrame
    || window.MozRequestAnimationFrame
    || window.msRequestAnimationFrame
    || window.ORequestAnimationFrame;

  const getNow = Date.now || (() => +new Date());

  let lastTime = getNow();

  if (!requestAnimFrame) {
    requestAnimFrame = (callback) => {
      // How long did it take to render?
      const deltaTime = getNow() - lastTime;
      const delay = Math.max(0, 1000 / 60 - deltaTime);

      return window.setTimeout(() => {
        lastTime = getNow();
        callback();
      }, delay);
    };
  }

  return requestAnimFrame;
}

值得注意的是,在移动端上requestAnimFrame可能会有性能问题,这个时候在移动端上建议不使用requestAnimFrame而使用setTimeout,代码如下:

polyfillRAF() {
  let requestAnimFrame = window.requestAnimationFrame
    || window.webkitRequestAnimationFrame
    || window.MozRequestAnimationFrame
    || window.msRequestAnimationFrame
    || window.ORequestAnimationFrame;

  const getNow = Date.now || (() => +new Date());

  let lastTime = getNow();

  // 判断移动端
  if (_isMobile || !requestAnimFrame) {
    requestAnimFrame = (callback) => {
      // How long did it take to render?
      const deltaTime = getNow() - lastTime;
      const delay = Math.max(0, 1000 / 60 - deltaTime);

      return window.setTimeout(() => {
        lastTime = getNow();
        callback();
      }, delay);
    };
  }

  return requestAnimFrame;
}

转载于:https://www.cnblogs.com/yangzhou33/p/11397518.html

本文来源weixin_30595035,由架构君转载发布,观点不代表Java架构师必看的立场,转载请标明来源出处:https://javajgs.com/archives/29413

发表评论