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() {

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 /动画/ ：

由于requestAnimationFrame（）的性质，你永远不应该排队使用的setInterval或setTimeout的循环动画。为了preserve 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屋！