1

是否可以在指定时间后删除 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 下线时，我需要<li>在 10 秒后删除 Marco，但如果他在 10 秒内重新上线，则应停止计时器并且<li>不应删除。

Socket 处理用户在线状态：

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

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

谁能给我一个通用的解决方案来使用计时器删除元素并在删除元素之前停止计时器？

4

3 回答 3

3

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

var timers = { };

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

// ...

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

该setTimeout函数返回对计时器的引用，因此存储该引用可以让您在以后清除它。

于 2013-09-02T16:47:43.470 回答
0

你可以使用setTimeout 

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

如果您需要取消超时，请致电

clearTimeout(timeout);

这是静态类型的，但您也可以为数据 id 插入一个变量。使用 marco 作为上面的具体示例。

于 2013-09-02T16:48:59.367 回答
0

多谢你们！！

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

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'));
}
于 2013-09-02T17:08:20.440 回答