【发布时间】：2020-09-24 22:47:54
【问题描述】：
我使用 requestAnimationFrame (RFA) 制作了一张自动幻灯片，我有 2 张幻灯片相继出现，而不是同时出现。只有当我总是在当前选项卡时，这才有效。如果我单击另一个选项卡然后返回当前选项卡，看起来幻灯片是混合的，它一起出现。在我单击其他选项卡时，动画似乎已暂停。我必须等待几秒钟然后它会再次正常工作。我使用浏览器 Chrome、Firefox 和 Edge，都有同样的问题。 在使用 RFA 之前，我尝试过 setInterval，但后来发现 setInterval 不如 RFA，所以我使用 RFA。 你能给我关于这个问题的任何建议吗？ 你可以在这里看到演示：https://repl.it/repls/SelfassuredOverjoyedGlitch#index.html
const slide_1 = document.getElementById("top-slide-1");
const slide_2 = document.getElementById("top-slide-2");
var startTime;
// SLIDE 1
const $behindImage = $("#behind-img");
const $frontImg = $("#front-img");
const $topSlideTitle = $("#top-slide-1__title");
const $topSlideTemplate = $("#top-slide-1__template");
const $topSlideResponsive = $("#top-slide-1__responsive");
const $topSlideButton = $("#top-slide-1__button");
var setTimeoutSlide1;
var setTimeoutSlide2;
function top_slide_1(){
slide_1.style.zIndex = 1000;
slide_2.style.zIndex = 0;
startTime = new Date().getTime();
$behindImage.animate({
"right": 370
}, 500, "swing", function () {
$frontImg.animate({
"right": 230
}, 500, "swing", function (){
$topSlideTitle.animate({
"top": 65
}, 300, "swing", function (){
$topSlideTemplate.animate({
"left": 205
}, 300, "swing", function(){
$topSlideResponsive.animate({
"left": 205
}, 300, "swing", function (){
$topSlideButton.animate({
"top": 260
}, 300, "swing", function(){
$topSlideButton.animate({
"top": 340
}, 50, "swing", function (){
$topSlideButton.animate({
"top": 300
}, 100, "swing", () => {
setTimeoutSlide1 = setTimeout(() => {
$behindImage.animate({
"right": "-100%"
}, 300);
$frontImg.animate({
"right": "-100%"
}, 300);
$topSlideTitle.animate({
"top": "-100%"
}, 300);
$topSlideTemplate.animate({
"left": "-100%"
}, 300);
$topSlideResponsive.animate({
"left": "100%"
}, 300);
$topSlideButton.animate({
"top": "100%"
}, 300)
}, 3000)
})
})
})
})
})
})
})
})
}
// END SLIDE 1
// SLIDE 2
const $behindImage2 = $("#behind-img-2");
const $frontImg2 = $("#front-img-2");
const $topSlide2Title = $("#top-slide-2__title");
const $topSlide2Color = $("#top-slide-2__color");
const $topSlide2Structure = $("#top-slide-2__structure");
const $topSlide2Customize = $("#top-slide-2__customize");
const $topSlide2Everything = $("#top-slide-2__everything");
function top_slide_2(){
slide_1.style.zIndex = 0;
slide_2.style.zIndex = 1000;
startTime = new Date().getTime();
$behindImage2.animate({
right: 560
}, 300, "swing", function (){
$frontImg2.animate({
bottom: 30
}, 300, "swing", function (){
$topSlide2Title.animate({
top: 100
}, 300, "swing", function(){
$topSlide2Color.animate({
top: 190
}, 300);
$topSlide2Structure.animate({
top: 235
}, 500);
$topSlide2Customize.animate({
top: 280
}, 800, "swing", function (){
$topSlide2Everything.animate({
top: 350
}, 300, "swing", function (){
setTimeoutSlide2 = setTimeout(() => {
$behindImage2.animate({right: "-100%"}, 200);
$frontImg2.animate({bottom: "-100%"}, 200);
$topSlide2Title.animate({top: "-100%"}, 200);
$topSlide2Color.animate({top: "-100%"}, 200);
$topSlide2Structure.animate({top: "-100%"}, 200);
$topSlide2Customize.animate({top: "-100%"}, 200);
$topSlide2Everything.animate({top: "100%"}, 200);
}, 3700)
})
})
})
})
})
}
top_slide_1(); // default when page load
let counter = 1;
let runTopSlide = function (){
let currentTime = new Date().getTime();
let passedTime = currentTime - startTime;
if (passedTime >= 6200){
console.log(passedTime);
counter += 1;
if (counter > 2) {counter = 1};
if (counter === 1) {
top_slide_1();
} else top_slide_2();
}
window.requestAnimationFrame(runTopSlide)
}
runTopSlide();
【问题讨论】：
-
你能把它变成一个我们可以测试的sn-p吗？
-
我刚刚添加了演示问题的链接。你能不能看看那个。因为，此刻我真的不知道如何在这个网站上把它转成sn-p，对不起。 repl.it/repls/SelfassuredOverjoyedGlitch#index.html
-
这种行为是浏览器的典型行为，在这里你会找到原因：
StackOverflow Answer。作为建议，您可以使用特定的window事件停止和重新启动动画：StackOverflow Answer。
标签： javascript jquery animation browser setinterval