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>

注意：我没有重新加载页面以获得警报值，我可以随时获得价值，这就是为什么我使用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>

将间隔设置为函数不起作用

1 个答案: