如何让一段Javascript仅在用户处于不同的选项卡上时才能工作？

Question

我有下面的javascript，让网页标题每隔五秒就会一次又一次地改变。

<script>
        var titleArray = ["TITLE-1","TITLE-2","TITLE-3","TITLE-4"];
        var N = titleArray.length;
        var i = 0;
        setInterval(func,5000);
        function func(){
            if (i == 4) {
                i = 0;
            }
            document.title = titleArray[i];
            i++;
        }

</script>

我希望它只工作时，用户已经打开了一个不同的标签，以便“吸引”他/她回到我的标题他/她在我的网站上，我希望这个javascript停止工作，所以网页的标题是什么，我只是写在site.While标签。

这是我想要的东西的摘要。

<script>
if (the user is not on this tab but has opened and is using a different tab)
{the javascript I have mentioned above};
elce {nothing so the title tags work};
</script>

附言:这是个好主意吗？还有其他的建议吗？我真的很喜欢跳出框框去思考。

Answer 1

请尝试使用以下脚本。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
    var isActive;

    window.onfocus = function () { 
      isActive = true; 
    }; 

    window.onblur = function () { 
      isActive = false; 
    }; 

    // test
    var titleArray = ["TITLE-1","TITLE-2","TITLE-3","TITLE-4"];
    var N = titleArray.length;
    var i = 0;
    function changeTitle(){
        if (i == 4) {
            i = 0;
        }
        document.title = titleArray[i];
        i++;
    }

    setInterval(function () { 
      if(window.isActive !== true){
        changeTitle();
      }
    }, 1000);
</script>