amp-carousel 0.2切换屏幕分辨率报startLayout错误如何解决？

问题性质 #

该报错是amp-carousel 0.2版本的原生自带bug，根因为组件的autoplay逻辑和窗口resize触发的重布局流程存在状态同步缺陷：窗口resize时组件会先将布局状态重置为非调度状态，但autoplay的计时回调没有被同步中断，依然尝试调用布局方法，因此抛出startLayout called but not LAYOUT_SCHEDULED currently: 2的状态不匹配错误。

修复方案 #

你可以根据业务需求选择以下任意一种方案解决：

• 方案1：resize时临时暂停autoplay，防抖后恢复
  给你的amp-carousel设置唯一id（示例用id="my-carousel"），添加如下逻辑即可，注意该脚本需要包裹在合法的amp-script标签内使用，避免违反AMP的脚本规范：

  let resizeTimer = null;
  window.addEventListener('resize', () => {
    const carousel = document.getElementById('my-carousel');
    // 暂停autoplay
    carousel.removeAttribute('autoplay');
    clearTimeout(resizeTimer);
    // 防抖200ms后恢复autoplay，时长可根据需求调整
    resizeTimer = setTimeout(() => {
      carousel.setAttribute('autoplay', '');
    }, 200);
  });
  

• 方案2：调整布局配置规避触发条件
  给amp-carousel外层套一个预设宽高比的容器，将carousel的layout属性改为fill，替代原来的responsive或fixed-height + width=auto配置，减少resize时组件本身的布局重算逻辑，从触发条件上避免冲突，示例配置如下：

  <!-- 外层容器的padding-top值对应轮播的宽高比，示例为2:1，可按需调整 -->
  <div style="position:relative; width:100%; height:0; padding-top:50%;">
    <amp-carousel
      type="slides"
      layout="fill"
      delay="2000"
      autoplay>
      ...
    </amp-carousel>
  </div>
  

• 方案3：回退0.1版本并自定义切换速度
  如果你不需要0.2版本的其他特性，可以继续使用无该bug的0.1版本，通过自定义CSS覆盖轮播切换的过渡时长即可满足速度需求，修改amp-carousel .i-amphtml-slide-item的transition-duration属性就能调整切换速度。
• 方案4：后续升级官方修复版
  待AMP官方发布修复该问题的amp-carousel 0.2更新版本后，直接升级组件版本即可永久解决该问题。

内容的提问来源于stack exchange，提问作者Varvara