Question

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

Answer 1

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

我还更新了您的代码以使用数组文字语法（[]代替new Array()，这更短且更常用）和.addEventListener()而不是{{1事件属性因为它更健壮并且遵循现代Web事件处理标准。

此外，养成将一个代码块的开口花括号放在与块声明相同的行上的习惯。

这样做：

onXyx

而不是：

funciton foo() {

}

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

function foo()
{

}

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

1 个答案: