检查类在javascript中的存在时间是否长于X

Check is class exist longer than X in javascript

本文关键字：是否 时间 存在 javascript 检查      更新时间：2023-09-26

我写了一个简单的监视器，它可以检查网络上的一些东西并显示状态——我使用ajax获取状态。当出现问题时，我会将class error添加到显示当前状态的div中。

后来我添加了一个带有错误声音的播放器，当出现类错误时，它会播放音乐。我设定了3秒的间隔，仅此而已。

但错误并不总是意味着错误，有时我会收到错误的警告。现在我正在寻找当类错误存在时间超过XX秒时播放声音的方法。

我想我必须编写间隔为1s的函数，将每个命中1的值添加到临时变量中，并检查变量是否比其他干净的临时变量大，但也许还有更优雅的方法。

我想它应该可以

$('.error').each(function(){
var e = $(this)
setTimeout(function(){
if (e.attr('class') == 'error'){
e.attr('class','error-with-sound');
}
},2000);
});

您应该使用两个vars存储它们各自事件的当前时间。

var oldTime, newTime;
// Now when you are adding the class
$(something).addClass("someclass");
oldTime = new Date().getTime(); // Store the timestamp.
//And when you are removing the class
$(something).removeClass("someclass");
newTime = new Date().getTime(); // Store the timestamp.
// Now you check whether class was added for more then XX Seconds
var _diff = (newTime - oldTime)/1000; // Diference is in seconds.

没有直接的方法，您可以在类中使用类似error_1448953716457的分隔符添加时间戳，稍后您可以将其拆分并与当前时间戳进行比较

$('#na').click(function () {
    var t = new Date().getTime();
    $('h1').addClass("error_" + t);
});
$('#nr').click(function () {
    var t = new Date().getTime();
    $("[class^=error]").each(function (e) {
        $("span").html("Diff. Seconds : " + ((t - ($(this).attr('class').split(' ').pop().split('_')[1])) / 1000).toString());
    });
});
input {
    width:100px;
}
.error {
    color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
 <h1>.addClass()</h1>
<input id="na" value="Add Class1" type="button" />
<br/>
<input id="nr" value="Calculate Diff" type="button" />
<span></span>

如果要跟踪页面上的.error元素，请设置一个独立的间隔，通过在jquery中设置属性或数据值来查找这些元素并跟踪以前看到的元素。

如果不再需要检查.error元素，请记住clearInterval(interval)。

(function ($) {
  // set constants in milliseconds as desired
  var INTERVAL_LENGTH = 100, // how often to check DOM for error elements
      NOTIFY_AFTER = 3000;   // handle error after this length
  // check for .error elements and handle those that have been around for a while
  var interval = setInterval(function () {
    var now = Date.now();
    $(".error").each(function () {
      var t = $(this).data('error-time');
      if(t) {
        if(now - t > NOTIFY_AFTER) {
          handleErrorElement(this);
        }
      }
      else {
        $(this).data('error-time', now);
      }
    });
  }, INTERVAL_LENGTH);
  function handleErrorElement(elem) {
    // do what you need for error elements visible past a threshold
    console.log("handling error element: ", elem);
  }
})(jQuery);
相关文章：