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

是否可以在指定的时间后删除一个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离线时，我需要在10秒后删除Marco的<li> ，但是如果他在10秒内恢复在线状态，应该停止计时器，并且不应该移除<li> 。

Socket处理用户的在线状态：

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

任何人都可以给我一个通用的解决scheme，使用定时器删除一个元素，并停止计时器，然后再删除元素？

Answer 1

你可以用setTimeout和clearTimeout的组合来完成这个任务。

 var timers = { }; timers.marco = setTimeout(function() { $('ul > li').remove(); }, 10000); // ... if (user.isOnline) { clearTimeout(timers.marco); } 

setTimeout函数返回对定时器的引用，所以存储引用可以让你稍后清除它。

Answer 2

你可以使用setTimeout来做到这一点

 var timeout = setTimeout(function() { $('*[data-id="25"]').remove(); },10000); 

如果你需要取消超时只是打电话

 clearTimeout(timeout); 

这是静态types，但你可以插入一个variables的数据ID以及..使用marco作为上面的具体例子。

Answer 3

多谢你们！！

我只是在你的帮助下创build了一个通用函数，

 function auto_destroy(data) { var t = setTimeout(function() { data['DOM'].fadeOut('fast',function(){ $(this).remove(); }); }, data['secs']); data['DOM'].data('destroy_timer', t); } function remove_destroy_timer(dom) { clearTimeout(dom.data('destroy_timer')); }