Question

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

一切正常，直到我离开页面查看任何其他浏览器标签。当我使用我的脚本返回选项卡时，数字（淡入淡出）覆盖/重叠。据我所知，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);
})

Answer 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);
        });
    });    
}

jQuery .fadeIn（）覆盖（在另一个浏览器选项卡查看之后）

1 个答案: