与潜在扩展程序一起过期的Javascript警报

我有javascript警告出现,我希望每个警报在3秒后消失,但是我只能让他们一次消失,然后我不能再发出任何警报.

我也希望如果用户将鼠标悬停在警报上,则会重置3秒直到警报消失.

现在我正在使用该setTimeout功能,我99%肯定这是我的问题,我认为我需要重构一些东西以使用一些jquery延迟或其他等待功能,但我不确定如何做到这一点仍然得到我正在寻找的行为.

HTML看起来像这样:

  
Red Alert!
  

  

JavaScript代码是:

$('.btn-danger').click(function(){
  var count = $('#alerts').data('count');
  var alert = '
' + count +'
';
  var a = $('#alerts').append(alert)
  setTimeout(function() { $(a).hide(); }, 3000);
  count += 1;
  $('#alerts').data('count', count);
});

的jsfiddle

最后的JSFiddle

您的所有警报一次消失而您无法添加新警报的原因是此代码:

var alert = '
' + count +'
';
var a = $('#alerts').append(alert)
setTimeout(function() { $(a).hide(); }, 3000);

您期望变量a是单个警报的jQuery对象,但事实并非如此.它是整个$('#alerts')对象,即警报的父对象.那是因为.append()返回你要附加的对象,而不是你要追加的对象.换句话说,像许多jQuery函数一样,.append()返回"点左边的东西",因此它是可链接的.

因此,当计时器用完时,您不仅要隐藏单个警报,还要隐藏父容器,从而将它们全部隐藏起来.在此之后,您的代码仍会成功创建警报元素,但您无法看到它们,因为隐藏了父级.

我要做的是通过在$()调用中包装HTML字符串来创建您想要的jQuery对象.我们称之为变量$alert.虽然我们在它,因为$('#alerts')在代码中出现了几个地方,我们也会给它一个变量:

$('.btn-danger').click(function(){
  var $alerts = $('#alerts');
  var count = $alerts.data('count');
  var $alert = $(
    '
' +
      count +
    '
'
  );
  $alerts.append($alert);
  setTimeout(function() { $alert.hide(); }, 3000);
  count += 1;
  $alerts.data('count', count);
});

这是一个更新的小提琴.

要在鼠标移动到其中一个警报时重置超时,您只需要将setTimeout()返回值保存在本地变量中,当有mousemove事件时,调用clearTimeout()该变量并启动一个新的计时器,如下所示:

$('.btn-danger').click(function() {
  var timer;
  var $alerts = $('#alerts');
  var count = $alerts.data('count');
  var $alert = $(
    '
' +
      count +
    '
'
  );
  $alerts.append($alert);
  startTimer();
  $alert.on( 'mousemove', startTimer );
  count += 1;
  $alerts.data('count', count);

  function startTimer() {
    clearTimeout( timer );
    timer = setTimeout( function() {
      $alert.hide();
    }, 3000 );
  }
});

这是小提琴的这个版本.

我现在的最后一个建议是......除非你真的需要将count值存储在data-countDOM属性中,否则我建议只使用一个JavaScript变量:

(function() {
  var count = 0;
  $('.btn-danger').click(function() {
    ++count;
    var timer;
    var $alerts = $('#alerts');
    var $alert = $(
      '
' +
        count +
      '
'
    );
    $alerts.append($alert);
    startTimer();
    $alert.on( 'mousemove', startTimer );

    function startTimer() {
      clearTimeout( timer );
      timer = setTimeout( function() {
        $alert.hide();
      }, 3000 );
    }
  });
})();

所以这是我晚上的最后小提琴,以及一个可运行的片段:

(function() {
  var count = 0;
  $('.btn-danger').click(function() {
    count += 1;
    var timer;
    var $alerts = $('#alerts');
    var $alert = $(
      '
' +
        count +
      '
'
    );
    $alerts.append($alert);
    startTimer();
    $alert.on( 'mousemove', startTimer );

    function startTimer() {
      clearTimeout( timer );
      timer = setTimeout( function() {
        $alert.hide();
      }, 3000 );
    }
  });
})();

#site {
  height: 100%;
  width: 100%;
  position: absolute;
  top:0;
  left:0;
  background-color: cyan;
}
#alerts {
  position: absolute;
  right:0;
  bottom:0;
  width: 200px;
}

  
Red Alert!