2017-05-09 4 views
1

タブにフォーカスがないときにタイトルタグを変更するJavaScriptコードをウェブサイトに追加しました。タブにフォーカスがないときにウェブページのタイトルを変更する

タイトルがランダム化されたフレーズに変更され、数秒ごとに元のタイトルに切り替わります。

コードはほとんど機能しますが、タブにフォーカスが戻ったときにタイトルの切り替えを停止したいと思います。現時点では、訪問者がタグをクリックした後にトグルが行われます。

これはタイムアウト機能が停止していないためだと思いますが、わかりません。また、現時点では、1つのランダムなフレーズを表示し、次に別のフレーズを表示して元のタイトルに戻すこともあります。私は本当に1つのランダムなタイトルを表示して元に戻し、別のランダムなタイトルを表示したいと思います。ここで

は私の現在のコードです:

<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> 
+3

_私は現在何をしているのですか?その厄介な小さな虫をすばやく閉じることができます... done._ – CBroe

+0

Lol、あなたは正しいかもしれません!しかし私は私のウェブサイトに少しのhumo(u)rを追加したかったのです! :-) – iagdotme

答えて

3

はい、あなたはタイマーを解除する必要があります。これを行うには、以下のようにタイマーIDへの参照を格納する必要があります。

それは、より堅牢で、イベント処理のための最新のWeb標準に準拠していますので、私も(短く、より一般的に使用される代わりにnew Array()[]、)配列リテラル構文と.addEventListener()代わりonXyxのイベントプロパティを使用するようにコードを更新しました。

また、ブロックの宣言と同じ行にコードのブロック用の中括弧を置く習慣を身につけてください。

はこれを行います。

funciton 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; 
}); 
+0

あなたは閉じていますが、将来のタイムアウトが設定されて実行されないようにするには、 'setTimeout()'と反対の 'setInterval()'をクリアする必要があります。両方をクリアすることができますが、確実に 'setInterval()' ... – War10ck

+0

はありません 'timer = setTimeout(...)' は 'timeoutTimer'にする必要がありますか? – maxwell

+0

ちょうど私の最初のカフェインブレークから戻って、今私はまっすぐ考えることができます。 –

関連する問題