切换窗口之后js定时器自动停止了，如何回到窗口之后又继续呢？

Question

切换浏览窗口或者没有停留在当前窗口之后文字就不切换了，js定时器就自动停止了，是因为浏览器为了节约资源才停止不是当时窗口的定时器吗？如何回到窗口之后又继续呢？
这是需要用在移动端的，所以不能使用window.onfocus，那这个BUG要怎么解决呢？求大神赐教啊！

//显示文本
var tanmuTexts = [
    "000000000",
    "111111111111",
    "22222222222222",
    "333333333333333",
    "4444444444444444",
    "5555555555555555555",
    "666666666666666",
    "777777777777",
    "888888888888888",
    "99999999999999",
]
//文本对应的链接
var tanmuLinks = [
    "http://www.baidu.com",
    "http://www.baidu.com",
    "http://www.baidu.com",
    "http://www.baidu.com",
    "http://www.baidu.com",
    "http://www.baidu.com",
    "http://www.baidu.com",
    "http://www.baidu.com",
    "http://www.baidu.com",
    "http://www.baidu.com",
]
//显示的文本和链接的下标
var lengthNum = 0;
//显示的次数默认为tanmuTexts.length,可设置
function showTxt() {
    var num = $(".tanmu-link-171023").length;
    $($(".tanmu-link-171023")[num-1]).html(tanmuTexts[lengthNum]).attr("href",tanmuLinks[lengthNum]);
    //console.log("链接："+tanmuLinks[lengthNum]);
    //console.log("文本："+tanmuTexts[lengthNum]);
    lengthNum++;
    if(lengthNum >= tanmuTexts.length)lengthNum = 0;
}
// 动画
var nummmm = 0;
function showTanmu(){
    $(".tanmu-content-171023").addClass("showTanmu").one("webkitAnimationEnd animationend", function(){
        setTimeout(function(){
                        $(".tanmu-content-171023").removeClass("showTanmu hideTanmu");
            hideTanmu();
                        console.log(nummmm++);
        }, 2000);
    });
}
function hideTanmu(){
    $(".tanmu-content-171023").addClass("hideTanmu").one("webkitAnimationEnd animationend", function(){
                $($(".tanmu-content-171023")[0]).remove();
        showTanmu(); 
    });
        setTimeout(function(){
            $(".tanmu-main-171023").append('<div class="tanmu-content-171023 showTanmu">\
                                        <a class="tanmu-link-171023">\
                                                <span class="tanmu-text-171023"></span>\
                                        </a>\
                                </div>');
            showTxt();
        },250);
}
showTxt();
showTanmu();

这是偶发事件，DEMO里面我有打印执行次数，BUG不一定能重现，可以切出窗口久一点估计可能重现BUG。
这是我的DEMO地址：http://sandbox.runjs.cn/show/...
在@leeenx 大神的帮助下解决了，实在感谢，原来不是浏览器限制资源的问题，而是自己写法错误导致

//显示文本
var tanmuTexts = [
    "000000000",
    "111111111111",
    "22222222222222",
    "333333333333333",
    "4444444444444444",
    "5555555555555555555",
    "666666666666666",
    "777777777777",
    "888888888888888",
    "99999999999999",
]
//文本对应的链接
var tanmuLinks = [
        "http://www.baidu.com",
    "http://www.baidu.com",
    "http://www.baidu.com",
    "http://www.baidu.com",
    "http://www.baidu.com",
    "http://www.baidu.com",
    "http://www.baidu.com",
    "http://www.baidu.com",
    "http://www.baidu.com",
    "http://www.baidu.com",
]
        
//显示的文本和链接的下标
var lengthNum = 0;
//显示的次数默认为tanmuTexts.length,可设置
function showTxt() {
    
    var num = $(".tanmu-link-171023").length;
    
    
    $($(".tanmu-link-171023")[num-1]).html(tanmuTexts[lengthNum]).attr("href",tanmuLinks[lengthNum]);
    //console.log("链接："+tanmuLinks[lengthNum]);
    //console.log("文本："+tanmuTexts[lengthNum]);
    
    
    lengthNum++;
    if(lengthNum >= tanmuTexts.length)lengthNum = 0;
    
}
// 动画
var nummmm = 0;
function showTanmu(){
    $(".tanmu-content-171023").addClass("showTanmu")/*.one("webkitAnimationEnd animationend", function(){ 
        setTimeout(function(){
            $(".tanmu-content-171023").removeClass("showTanmu hideTanmu");
            hideTanmu(); 
        }, 2000);
    });*/
    // 页面挂起时事件不会被触发 直接改用 setTimeout
    setTimeout(function(){ 
        setTimeout(function(){
            $(".tanmu-content-171023").removeClass("showTanmu hideTanmu"); 
            hideTanmu(); 
        }, 2000);
    }, 1000); 
}
function hideTanmu(){ 
    $(".tanmu-content-171023").addClass("hideTanmu")/*.one("webkitAnimationEnd animationend", function(){
        $($(".tanmu-content-171023")[0]).remove(); 
        showTanmu(); 
    });*/
    // 页面挂起时事件不会被触发 直接改用 setTimeout
    setTimeout(function() {
        $($(".tanmu-content-171023")[0]).remove(); 
        showTanmu(); 
    }, 1000)
    setTimeout(function(){
        $(".tanmu-main-171023").append('<div class="tanmu-content-171023 showTanmu">\
                                    <a class="tanmu-link-171023">\
                                            <span class="tanmu-text-171023"></span>\
                                    </a>\
                            </div>');
        
        showTxt();
    },250);
}
showTxt();
showTanmu();

Answer 1

可以用 visibilitychange 事件来监听。

document.addEventListener("visibilitychange", function() {

if(document.hidden === true) {
    // 页面被挂起
} else {
    // 页面由挂起被激活
}

});

当然还有另一种方案可以解决你的问题，就是用 RAF 来模拟 setTimeout，如果你有兴趣可以看一下我写的一个版本 https://github.com/leeenx/es6... 。不过我是用 es6 写的