在 Safari 浏览器 (macbook) 的 javascript 中找不到变量

Question

我有一个fiddle，其中图像在特定时间间隔后淡出/淡入。我通过 JS 实现了这一点。这是我使用的代码：

if (window.innerWidth > 767) {
    console.log(document.querySelectorAll('.featured-block'));
    document.querySelectorAll('.featured-block .featured-block__item-multi')[0].classList.add('featured-block__item-multi-active');
    const pics = document.querySelectorAll('.featured-block .featured-block__item-multi');
    const lastPic = pics.length - 1;
    const transitionDuration = 500; // matches CSS
    let transitionDelay = 4*
    1000;
    const totalDelay = transitionDuration + transitionDelay;
    const intervalDelay = (transitionDuration * 2) + transitionDelay; // time to fade out + time to fade in + time to stay featured-block__item-active

    function toggleClass() {
        const activePic = document.querySelector('.featured-block .featured-block__item-multi-active');
        const activeIndex = Array.prototype.indexOf.call(pics, activePic);  // Line A
        const nextIndex = activeIndex === lastPic ? 0 : activeIndex + 1;
        const nextPic = pics[nextIndex];

        setTimeout(() => activePic.classList.remove('featured-block__item-multi-active'), transitionDelay);
        setTimeout(() => nextPic.classList.add('featured-block__item-multi-active'), totalDelay);
    }

    setInterval(toggleClass, intervalDelay);
}

上面的代码在我的 windows pc 上似乎可以正常工作，但在 safari (macbook) 上却不能正常工作。在A 行，我收到错误找不到图片变量。

问题陈述：

我想知道我应该在 Line A 上进行哪些更改，以便它可以在 safari (macbook) 上运行。

Answer 1

确保您的文件已加载

document.addEventListener("DOMContentLoaded", function(event) { 
  
  if (window.innerWidth > 767) {
    console.log(document.querySelectorAll('.featured-block'));
    document.querySelectorAll('.featured-block .featured-block__item-multi')[0].classList.add('featured-block__item-multi-active');
    const pics = document.querySelectorAll('.featured-block .featured-block__item-multi');
    const lastPic = pics.length - 1;
    const transitionDuration = 500; // matches CSS
    let transitionDelay = 4*
    1000;
    const totalDelay = transitionDuration + transitionDelay;
    const intervalDelay = (transitionDuration * 2) + transitionDelay; // time to fade out + time to fade in + time to stay featured-block__item-active

    function toggleClass() {
        const activePic = document.querySelector('.featured-block .featured-block__item-multi-active');
        const activeIndex = Array.prototype.indexOf.call(pics, activePic);  // Line A
        const nextIndex = activeIndex === lastPic ? 0 : activeIndex + 1;
        const nextPic = pics[nextIndex];

        setTimeout(() => activePic.classList.remove('featured-block__item-multi-active'), transitionDelay);
        setTimeout(() => nextPic.classList.add('featured-block__item-multi-active'), totalDelay);
    }

    setInterval(toggleClass, intervalDelay);
  }

});

.wrapper {
  width: 400px;
  height: 300px;
  position: relative;
}
.pic {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  transition: opacity 800ms ease; /* immediately start fading out when active class is lost */
}
.pic.active {
  opacity: 1;
}

<div class="wrapper">
  <img class="pic active" src="https://via.placeholder.com/400x300?text=picture%201" alt="">
  <img class="pic" src="https://via.placeholder.com/400x300?text=picture%202" alt="">
  <img class="pic" src="https://via.placeholder.com/400x300?text=picture%203" alt="">
  <img class="pic" src="https://via.placeholder.com/400x300?text=picture%204" alt="">
</div>