javascript - 如何使用 Jquery 在特定时间后自动销毁 DOM 元素

Question

是否可以在指定时间后删除 HTML 元素？

此外，如果在指定时间之间满足条件，我需要停止计时器移除元素。

示例代码，

<ul>
   <li  data-id="25">
      <a class="online">Marco</a>
   </li>
   <li  data-id="53">
      <a class="online busy">Polo</a>
   </li>
</ul>

当用户 Marco 下线时，我需要删除 Marco 的 <li> 10 秒后，但如果他在 10 秒内重新上线，则计时器应停止并且 <li>不应删除。

Socket处理用户在线状态:

socket.on('user_connected', function(data){
   var uId = data['uId'];
   ///
});

socket.on('user_disconnected', function(data){
   var uId = data['uId'];
   ///
});

任何人都可以给我一个通用的解决方案来使用计时器删除元素并在删除元素之前停止计时器吗？

Answer 1

您可以结合使用 setTimeout 和 clearTimeout 来完成此操作。

var timers = { };

timers.marco = setTimeout(function() {
  $('ul > li').remove();
}, 10000);

// ...

if (user.isOnline) {
  clearTimeout(timers.marco);
}

setTimeout 函数返回对计时器的引用，因此存储该引用允许您稍后清除它。