如何在使用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,使用定时器删除一个元素,并停止计时器,然后再删除元素?

       

网上收集的解决方案 "如何在使用Jquery的特定时间之后自动销毁DOM元素"

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

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

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

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

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

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

 clearTimeout(timeout); 

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

多谢你们!!

我只是在你的帮助下创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')); }