0

好吧，我真的坚持了一整天都在做这件事，我就是不能把它弄出来。

我有一个使用 setTimeout() 的 javascript 幻灯片。我知道在 chrome 和一些 FF 版本中，它会放慢速度以减少 CPU 使用率，然后在我返回幻灯片时加快速度以赶上它认为应该在幻灯片中显示的位置。

然而，这样做不仅加快了速度，而且还忽略了我的代码中的一些问题以跳出我的图像数组，从而导致短暂的未定义错误。这简直令人难以置信一旦它赶上它然后运行良好？？？我坚持任何想法，我该如何解决这个问题以及如何阻止它加速？这是我使用的代码。

<script type="text/javascript">

<?php 
$fetch_images = mysql_query($Aquery);
$fetch_title = mysql_query($Bquery);
$fetch_text = mysql_query($Cquery);
$num_rows =  mysql_num_rows($fetch_images);
?>
var i=0;
var products  = [<?php while($image = mysql_fetch_array($fetch_images)){echo "'".$image['imageurl']."',";}?>];
var productstitle  = [<?php while($title = mysql_fetch_array($fetch_title)){echo "'".$title['title']."',";}?>];
var productstext  = [<?php while($text = mysql_fetch_array($fetch_text)){echo "'".stripslashes($text['strapline'])."',";}?>];
function slideShow<?php echo $timerTag;?>(){
    if (i<=(products.length-1)){
        $('#headerslideimage').fadeTo("slow", 0, function() {
        <?php if(page('pageurl') != 'home'){?>
            document.getElementById('headerslidetitle').innerHTML=productstitle[i];
            document.getElementById('headerslidetext').innerHTML=productstext[i];
        <?php }?>
        document.getElementById('headerslideright').innerHTML="<img id='headerslideimage' src='"+products[i]+"' alt='"+productstitle[i]+"'/>";
        i++;
        $('#headerslideimage').fadeTo(4000, 100, function() {});
    });
} else {
    i = 0;
    $('#headerslideimage').fadeTo("slow", 0, function() {
    <?php if(page('pageurl') != 'home'){?>
    document.getElementById('headerslidetitle').innerHTML=productstitle[i];
    document.getElementById('headerslidetext').innerHTML=productstext[i];
    <?php }?>
    document.getElementById('headerslideright').innerHTML="<img id='headerslideimage' src='"+products[i]+"' alt='"+productstitle[i]+"'/>";
    i++;
    $('#headerslideimage').fadeTo(4000, 100, function() {});
});
}
setTimeout("slideShow<?php echo $timerTag;?>()", 5000);
}
4

2 回答 2

0

在您的函数中使用Page Visibility API来检查页面当前是否可见。如果它没有跳过执行该迭代的任何内容。当他们不与您的页面交互时，这将有一个额外的好处，即使用更少的用户资源。

于 2012-05-22T01:46:34.953 回答
0

您的动画功能之一最终会调用requestAnimationFrame吗？ setInterval&setTimeout当您最小化或切换选项卡时不要停止运行，但requestAnimationFrame确实如此。结果是，如果您requestAnimationFrame从间隔（或链式超时）任务中调用，您将不断排队新任务，requestAnimationFrame以便在选项卡再次获得焦点时快速播放。

查看这个相关问题：Jquery setInterval on minimize

于 2012-05-22T01:33:50.683 回答