页面没有焦点时的javascript动画排队 [英] javascript animation queueing when page does not have focus

问题描述

所以这个滑动动画在页面上查看时效果很好，但是如果我转到另一个浏览器选项卡几分钟然后回到这个选项卡，就像我离开时所有的动画都在排队并且一下子运行得超快.看起来很可怕……有什么想法吗?

So this sliding animation works great when viewing on the page, but if i go to another browser tab for a couple minutes and come back to this tab it's like all the animations queued up while i was gone and run superfast all at once. It looks horrible... Any ideas?

$(document).ready(function() {

$(document).ready(function() {

var timeOuts = new Array();
var currentSlide = 0;
var slides = $('.banner_images').length;

homeanimation(currentSlide);
function homeanimation(i) {

    if (i == slides) { i = 0; }
    $('.banner_images:eq(' + i + ')').css('left', '-901px');
    $('.banner_images:eq(' + i + ')').animate({ "left": "0px" }, 800);
    $('.overlay-content:eq(' + i + ')').fadeIn(1500);
    timeOuts[0] = setTimeout(function() { $('.banner_images:eq(' + i + ')').animate    ({ "left": "901px" }, 800) }, 6000);
    timeOuts[1] = setTimeout(function() { $('.overlay-content:eq(' + i + ')').fadeOut(700) }, 6000);
    timeOuts[3] = setTimeout(function() { currentSlide = i + 1; }, 6000);
    timeOuts[2] = setTimeout(function() { homeanimation(currentSlide); }, 6000);

}

});

推荐答案

http://api.jquery.com/animate/ :

由于 requestAnimationFrame() 的性质，您不应该使用 setInterval 或 setTimeout 循环将动画排入队列.为了节省 CPU 资源，支持 requestAnimationFrame 的浏览器不会在不显示窗口/选项卡时更新动画.如果您在动画暂停时通过 setInterval 或 setTimeout 继续将动画排队，则所有排队的动画将在窗口/选项卡重新获得焦点时开始播放.为避免这种潜在问题，请使用循环中上一个动画的回调，或将函数附加到元素 .queue() 以设置启动下一个动画的超时时间.

Because of the nature of requestAnimationFrame(), you should never queue animations using a setInterval or setTimeout loop. In order to preserve CPU resources, browsers that support requestAnimationFrame will not update animations when the window/tab is not displayed. If you continue to queue animations via setInterval or setTimeout while animation is paused, all of the queued animations will begin playing when the window/tab regains focus. To avoid this potential problem, use the callback of your last animation in the loop, or append a function to the elements .queue() to set the timeout to start the next animation.

这篇关于页面没有焦点时的javascript动画排队的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！