当选项卡不在焦点时更改网页标题

Question

当选项卡不在焦点时更改网页标题

javascript

3

我已经在我的网站中添加了一些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>

- iagdotme

5

那个注意力狂欢的标签在那里干什么，分散了我目前正在做的事情的注意力？让我赶快关闭那个恼人的小东西...好了。 - CBroe

哈哈，你可能是对的！但我想在我的网站上增加一点幽默感！ :-) - iagdotme

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Scott Marcus · Accepted Answer

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

我还更新了您的代码，使用数组字面语法（[]代替new Array()，更短且更常用），并使用.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; 
});