Javascript 标签不在焦点时更改网页标题

我已经在我的网站上添加了一些Javascript代码，当标签不在焦点时会更改标题标签

它会将标题更改为随机短语，并每隔几秒钟左右切换回原始标题

代码几乎可以正常工作，但我希望在选项卡恢复焦点时停止标题切换。此时，在访问者单击标记后，切换将继续进行

我想这是因为超时功能没有停止，但我不确定。此外，目前，它有时会显示一个随机短语，然后再显示另一个，然后再恢复到原始标题。我真的希望它显示一个随机标题，然后恢复，然后显示另一个随机标题

这是我目前的代码：

<script>
var title = document.title;
var blurMessage = new Array("Please come back! :-( ", "Don't you love me anymore? :-(", "Fancy a cookie? ", "I'm feeling lonely :-( ");

window.onblur = function () 
  { 
      setInterval(function()
        {
           var rand = Math.floor((Math.random() * blurMessage.length));
           document.title = blurMessage[rand];
           setTimeout(function()
              {
                  document.title = title;
              },4000);
         },12000);

  }
window.onfocus = function () { document.title = title; }
</script>

var title=document.title；
var blurMessage=new数组（“请回来！”：-（“，“你不再爱我了吗？”：-（“，“想吃饼干吗？”，“我感到孤独：-（”）；
window.onblur=函数（）
{ 
setInterval（函数（）
{
var rand=Math.floor（（Math.random（）*blurMessage.length））；
document.title=blurMessage[rand]；
setTimeout（函数（）
{
document.title=标题；
},4000);
},12000);
}
window.onfocus=function（）{document.title=title；}

是的，您需要取消计时器。为此，您需要存储对计时器id的引用，如下所示

我还更新了您的代码以使用数组文字语法（

[]

而不是

新数组（）

，后者较短且更常用）和

.addEventListener（）

而不是

onXyx

事件属性，因为它更健壮，并且遵循现代的事件处理web标准

此外，养成习惯，将代码块的开头大括号放在与块声明相同的行上

这样做：

function foo() {

}

与此相反：

function foo()
{

}

在某些情况下，它实际上可以改变代码的执行方式，并被视为最佳实践

var title = document.title;
var blurMessage = [
  "Please come back! :-( ", 
  "Don't you love me anymore? :-(", 
  "Fancy a cookie? ", 
  "I'm feeling lonely :-( "
];

var intervalTimer = null;
var timeoutTimer = null;

window.addEventListener("blur", function () { 
   intervalTimer = setInterval(function() {
     var rand = Math.floor((Math.random() * blurMessage.length));
     document.title = blurMessage[rand];
     timeoutTimer = setTimeout(function() {
       document.title = title;
     },4000);
   },12000);
});

window.addEventListener("focus", function(){ 
  clearInterval(intervalTimer);
  clearTimeout(timeoutTimer);
  document.title = title; 
});

---

是的，您需要取消计时器。为此，您需要存储对计时器id的引用，如下所示

我还更新了您的代码以使用数组文字语法（

[]

而不是

新数组（）

，后者较短且更常用）和

.addEventListener（）

而不是

onXyx

事件属性，因为它更健壮，并且遵循现代的事件处理web标准

此外，养成习惯，将代码块的开头大括号放在与块声明相同的行上

这样做：

function foo() {

}

与此相反：

function foo()
{

}

在某些情况下，它实际上可以改变代码的执行方式，并被视为最佳实践

var title = document.title;
var blurMessage = [
  "Please come back! :-( ", 
  "Don't you love me anymore? :-(", 
  "Fancy a cookie? ", 
  "I'm feeling lonely :-( "
];

var intervalTimer = null;
var timeoutTimer = null;

window.addEventListener("blur", function () { 
   intervalTimer = setInterval(function() {
     var rand = Math.floor((Math.random() * blurMessage.length));
     document.title = blurMessage[rand];
     timeoutTimer = setTimeout(function() {
       document.title = title;
     },4000);
   },12000);
});

window.addEventListener("focus", function(){ 
  clearInterval(intervalTimer);
  clearTimeout(timeoutTimer);
  document.title = title; 
});

---

您很接近，但您应该清除

setInterval（）

，而不是

setTimeout（）

，以防止将来设置和执行超时。您可能希望清除这两个选项以确保安全，但确保

setInterval（）

…不会

timer=setTimeout（…）

需要

超时

？我刚从一天中第一次喝咖啡休息回来，现在我可以直接思考了。太好了，非常感谢，@ScottMarcus-这太完美了。是的，你对格式的看法是对的。只是我使用的格式对我的大脑更有意义，但我知道它是错的。我刚刚在我的网站上安装了它te，iag.me.：-）您很接近，但您应该清除

setInterval（）

，与

setTimeout（）

相反，以防止将来设置和执行超时。您可能希望清除这两个选项以确保安全，但要确保

setInterval（）

不会

timer=setTimeout（…）

需要

超时

？我刚从一天中第一次喝咖啡休息回来，现在我可以直接思考了。太好了，非常感谢，@ScottMarcus-这太完美了。是的，你对格式的看法是对的。只是我使用的格式对我的大脑更有意义，但我知道它是错的。我刚刚在我的网站上安装了它te，iag.me.：-）戒指标签上的注意力是什么，分散了我的注意力？让我最好快点关上那个讨厌的小家伙…好了。哈哈，你可能是对的！但我想在我的网站上加一点humo（u）r！：-）戒指标签上的注意力是什么，把我的注意力从我目前正在做的事情上转移开？让我快点关上那个讨厌的小家伙。。。好了，哈哈，你可能是对的！但是我想在我的网站上添加一点humo（u）r！：-）