関数のインターバルを設定しないと、

Question

私は自分のプロジェクトにプッシュ通知を実装したので、いつもコンテンツを変更できるブートストラップアラートがあります。デフォルトとして、それは空来るので、私はそれが空で来る場合、アラート非表示機能を持っており、3秒ごとにチェックし、新たなコンテンツを持っている場合

問題は、それがコンテンツを取得するとき、それは通知

setInterval(function() { 
 
    hideAlert("a1"); 
 
}, 3000); 
 

 
function hideAlert(id) { 
 
    var text = $('#' + id + ' #discussion').text(); 
 
    if (text.length <= 0) 
 
    $('#' + id).hide(); 
 
}

#a1 { border: 1px solid red; } 
 
#discussion { border: 1px solid blue; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="a1" class="alert alert-success"> 
 
    <div id="discussion" contenteditable="true"></div> 
 
</div>

を表示されませんです

注：私は、警告に値を取得するためにページをリロードいけない、私は私が使用する理由that's、任意の時点で値を得ることができたsetIntervalが、それはあなたがそれを隠している作品

Answer 1

をドント、表示しないもう一度。新しい応答が受信された場合は、の通知を表示する必要があります。

// interval for checking status again and again 
 
setInterval(function() { 
 
    checkAlertStatus("a1"); 
 
}, 500); 
 

 
// check status at first 
 
checkAlertStatus("a1"); 
 

 
// function to check status (show or hide alert) 
 
function checkAlertStatus(id) { 
 
    var text = $('#' + id + ' #discussion').text(); 
 
    if (text.length <= 0) 
 
    $('#' + id).hide(); 
 
    else 
 
    $('#' + id).show(); 
 
} 
 

 
// simulate receiving text from websocket or ajax request 
 
setTimeout(function() { $('#discussion').text('Hello Notification'); }, 1000); 
 
setTimeout(function() { $('#discussion').text(''); }, 2000); 
 
setTimeout(function() { $('#discussion').text('Another reponse'); }, 3000);

#a1 { border: 1px solid red; } 
 
#discussion { border: 1px solid blue; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="a1" class="alert alert-success"> 
 
    <div id="discussion" contenteditable="true"></div> 
 
</div>