为什么带有setTimeout函数的requestAnimation无法在Chrome / Opera中工作？

Question

我正在尝试制作一个动画画廊，该画廊将平滑地绘制第一个幻灯片，然后等待一会儿，然后重新绘制下一个幻灯片，依此类推（以片段为单位绘制幻灯片）。

我使用了setTimeout中捕获的requestAnimationFrame，它可以按我的意愿工作，但仅在Firefox中工作。它根本不会在Chrome或Opera中调用动画。

我试图注释掉动画幻灯片的整个部分（这样就只画了它的第一部分），但没有帮助。还尝试删除所有在画布上切割画布和图像的部分，只绘制整个图像，但这也无济于事。

这是一个jsfiddle https://jsfiddle.net/Valilna/64qmtpvu/3/

var slideW = slideObjectsArray[j].width;
var slideH = (slideW / sectionCountW) * sectionCountH;
var slideSectorW = slideW / 5;
var gallerySectorW = galleryWidth / 5;
var speedGallery = (gallerySectorW/100) * 5;
var speedSlide = (slideSectorW/100)*5;

function drawSlide () {
    for (n = 0; n < 5; n++) {
    if (speedGallery <= gallerySectorW) {
        ctx.drawImage(slideObjectsArray[j], slideSectorW * n, 0, 
                      speedSlide, slideH,
                      (gallerySectorW * (n + 1) - speedGallery), 
                      0, speedGallery, galleryHeight);
    } else if (speedGallery > gallerySectorW){
        speedGallery = gallerySectorW;
    ctx.drawImage(slideObjectsArray[j], slideSectorW * n, 0, 
                  speedSlide, slideH,
                  (gallerySectorW * (n + 1) - speedGallery), 
                  0, speedGallery, galleryHeight);
    }
  }

  if (speedGallery < gallerySectorW) {
    speedGallery += (gallerySectorW/100) * 5;
    speedSlide += (slideSectorW/100)*5;
    setTimeout(function () {
      requestAnimationFrame(drawSlide);
    }, 25);
  } else if (speedGallery === gallerySectorW) {
    speedGallery = (gallerySectorW/100) * 5;
    speedSlide = (slideSectorW/100)*5;
    if (j < 6){
      j ++;
    } else {
      j = 0;
    }
    setTimeout(function () {
      requestAnimationFrame(drawSlide);
    }, 4000);
  }

}

slideObjectsArray[0].onload = drawSlide;

我是编码的新手，刚刚开始学习，所以我确定我犯了一些愚蠢的错误，如果您能向我展示它，我将不胜感激。