Question

我出现了javascript警告，我希望每次警报在3秒后消失，但是我只能让它们一下子全部消失，然后我就不能再做了警报。

如果用户将鼠标悬停在警报上，我还希望这会重置3秒，直到警报消失。

现在我正在使用public final static long getSelfPid() { // Java 9 only // return ProcessHandle.current().getPid(); try { return Long.parseLong(new File("/proc/self").getCanonicalFile().getName()); } catch( Exception e ) { return -1; } } public final static String getJVMCommandLine() { try { // Java 9 only // long pid = ProcessHandle.current().getPid(); long pid = getSelfPid(); byte[] encoded = Files.readAllBytes(Paths.get("/proc/"+pid+"/cmdline")); // assume ISO_8859_1, but could look in /proc/<pid>/environ for LANG or something I suppose String commandLine = new String( encoded, StandardCharsets.ISO_8859_1 ); String modifiedCommandLine = commandLine.replace((char)0, ' ').trim(); return modifiedCommandLine; } catch( Exception e ) { return null; } }`功能，我99％肯定这是我的问题，我想我需要重组一些事情以使用一些jquery延迟或其他等待功能，但我不确定如何做到这一点，仍然得到我正在寻找的行为。

HTML看起来像这样：

setTimeout

JavaScript代码是：

<div id="site">
  <div class="btn btn-danger">Red Alert!</div>
  <div id="alerts" data-count="1">
  </div>
</div>

JSFiddle

Final JSFiddle

Answer 1

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

var alert = '<div class="alert alert-danger" role="alert" data-dismiss="alert">' + count +'</div>';
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 = $(
    '<div class="alert alert-danger" role="alert" data-dismiss="alert">' +
      count +
    '</div>'
  );
  $alerts.append($alert);
  setTimeout(function() { $alert.hide(); }, 3000);
  count += 1;
  $alerts.data('count', count);
});

这是一个updated fiddle。

要在鼠标移过其中一个警报时重置超时，您只需将setTimeout()返回值保存在局部变量中，当有mousemove事件时，请调用{{1在那个变量上启动一个新的计时器，如下所示：

clearTimeout()

这是this version of the fiddle。

我现在的最后一个建议...除非你真的需要在$('.btn-danger').click(function() { var timer; var $alerts = $('#alerts'); var count = $alerts.data('count'); var $alert = $( '<div class="alert alert-danger" role="alert" data-dismiss="alert">' + count + '</div>' ); $alerts.append($alert); startTimer(); $alert.on( 'mousemove', startTimer ); count += 1; $alerts.data('count', count); function startTimer() { clearTimeout( timer ); timer = setTimeout( function() { $alert.hide(); }, 3000 ); } }); DOM属性中存储count值，否则我建议只使用一个JavaScript变量：

data-count

所以这是我的final fiddle for the night，以及一个可运行的代码段：

(function() {
  var count = 0;
  $('.btn-danger').click(function() {
    ++count;
    var timer;
    var $alerts = $('#alerts');
    var $alert = $(
      '<div class="alert alert-danger" role="alert" data-dismiss="alert">' +
        count +
      '</div>'
    );
    $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 = $(
      '<div class="alert alert-danger" role="alert" data-dismiss="alert">' +
        count +
      '</div>'
    );
    $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;
}

有了这个，我会给你一个挑战。如果你试试这个，你可能会注意到一些不理想的事情。一个是你必须保持鼠标移动以防止超时。您可以使用<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <div id="site"> <div class="btn btn-danger">Red Alert!</div> <div id="alerts" data-count="1"> </div> </div>和mousemove，而不是像在此代码中那样使用mouseenter。与此相关的是，如果鼠标超过任何警报，似乎停止所有超时可能会更好。否则，当清除另一个警报时，鼠标悬停的警报可能会从其下方滑出。那也不难做到。

快乐的黑客攻击！

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

1 个答案: