Question

我已经构建了一个函数，每次发送ajax请求时都会显示通知，我只需调用showAjaxAlert()函数：

function showAjaxAlert(message, type) {
    var rand = randomNumber(100000, 1000000);
    document.getElementById('notification_area').innerHTML = document.getElementById('notification_area').innerHTML + '<div class="ajax-notification ajax-notification-' + type + ' ajax-notification-' + rand + ' alert">' + message + '</div>';
    $('.ajax-notification-' + rand).delay(500).fadeOut('slow');
}

我为每个div使用一个随机数来跟踪im淡出，这是随机数函数：

function randomNumber(min, max)
{
    return Math.floor(Math.random()*(max-min+1)+min);
}

我将所有ajax通知存储在1个父div中，ID为“notification_area”

<div id="notification_area"></div>

这是我的CSS：

#notification_area {
    position: fixed;
    top: 2em;
    opacity: 0.8;
    right: 2em;
}

.ajax-notification{
    color: #fff;
    background-color: red;
}

但问题是，如果第一个没有在另一个警报显示之前消失，它会永远停留在那里，只有最近的警报会消失，就像我必须先等待之前的警报消失才能消失发送另一个ajax警报。为什么会发生这种情况，有没有办法解决它？

Answer 1

由于您使用的是jQuery，因此可以使用append()代替innerHTML，因此只需添加新通知而不触及旧通知，以便延迟工作正常，请查看下面的示例。 / p>

希望这有帮助。

function showAjaxAlert(message, type) {
  var rand = randomNumber(100000, 1000000);

  $('#notification_area').append('<div class="ajax-notification ajax-notification-' + type + ' ajax-notification-' + rand + ' alert">' + message + '</div>');

  $('.ajax-notification-' + rand).delay(1000).fadeOut('slow');
}

function randomNumber(min, max){
  return Math.floor(Math.random()*(max-min+1)+min);
}

$('#show').on('click', function(){
  showAjaxAlert('Test Message','Success');
})

#notification_area {
  position: fixed;
  top: 2em;
  opacity: 0.8;
  right: 2em;
}

.ajax-notification{
  color: #fff;
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="notification_area"></div>
<button id="show">Show notification</button>

Answer 2

此处不需要randon号码和randon名称。

function showAjaxAlert(message, type) {
  var notificationArea = $('#notification_area'); 
  var notification = $("<div>")
            .addClass("ajax-notification")
            .addClass("ajax-notification-" + type)
            .addClass("alert")
            .html(message);
  notification.appendTo(notificationArea);

  notification.delay(1000).fadeOut('slow');
}

诀窍在于'通知'是此功能的原生对象，因此它会在一秒钟后淡出。

Answer 3

使用jQuery.append（），我建议您出于性能原因引用带有id而不是类的新添加的警报。

看看这个小提琴似乎正在做你想要的......

https://jsfiddle.net/s2zxh5uh/

function showAjaxAlert(message, type) 
{
    var rand = randomNumber(100000, 1000000);
    $('#notification_area').append('<div id="ajax-notification-'+rand+'" class="ajax-notification ajax-notification-' + type + ' alert">' + message + '</div>');
    $('#ajax-notification-' + rand).delay(500).fadeOut('slow');
}  

function randomNumber(min, max)
{
    return Math.floor(Math.random()*(max-min+1)+min);
}

淡出所有的div？

3 个答案: