0

我写了一个脚本来在背景上显示数字，这些数字正在淡入淡出。（某种矩阵主题）

一切正常，直到我离开页面查看任何其他浏览器选项卡。当我使用脚本返回选项卡时，数字（淡入和淡出）重叠/重叠。据我了解 setInterval() 在此选项卡处于非活动状态的一段时间内开始取消我的函数 codeGhost() 时间间隔。

如果用户从其他浏览器选项卡返回到我的脚本页面，是否有任何方法可以同步 setInterval() 和 codeGhost() 函数而不出现此问题？

最好的祝福。

var codeElement = 1;
function randomIntNum(){
    codeElement = Math.floor(Math.random()*10);
}
function getRandomInt(min, max){
  return Math.floor(Math.random() * (max - min + 1)) + min;
}
$(document).ready(function(){
    function codeGhost(){ 
     $("#codeGhost").css({
        'top' : getRandomInt(0,400),
        'left': getRandomInt(0,900)
    });
        randomIntNum();
        $('#codeGhost').html(codeElement);
        $('#codeGhost').fadeIn( 2000, function(){ $('#codeGhost').fadeOut( 2000) });
    }
    setInterval(codeGhost, 4000);
})
4

1 回答 1

1

好吧，您不必在文档就绪处理程序中声明您的 codeGhost() 函数 - 只有您的 setInterval - 所以您可以将它移到函数之外，这可能是一个好习惯。

您的小提琴似乎工作正常，但可能您遇到多个超时冲突。我会改变

setInterval(codeGhost, 4000);

为了

setTimeout(codeGhost, 4000);

然后在每次运行时从您的 codeGhost() 函数中调用下一个超时：

function codeGhost(){ 
    $("#codeGhost").css({
        'top' : getRandomInt(0,400),
        'left': getRandomInt(0,900)
    });
    randomIntNum();
    $('#codeGhost').html(codeElement);
    $('#codeGhost').fadeIn(2000, function(){ 
        $('#codeGhost').fadeOut(2000, function() {
            setTimeout(codeGhost, 4000);
        });
    });    
}
于 2013-09-24T12:02:30.300 回答