javascript - 自毁 div 上的刷新计时器 setTimeout(function(){...},3000);

Question

所以我有这个 fiddle here它在右下角添加一个 div 以在用户添加元素时通知用户(单击事件 item1..item5 div)。此 div 在几秒钟后自毁 (div.remove())。

$(document.body).append(element); //the div created

setTimeout(function(){
      $('#test').remove(); //the div to be removed
}, 3000);

第一个问题是，不到3秒加几个div，会导致很多div看不到下面的。所以我在执行任何其他操作之前在 .click() 事件中添加了这一行。

$('#test').remove();

新的/当前的问题是，在不到 3 秒的时间内添加多个 div 可能会导致 div 只出现一秒或更短时间，而无法看到它是什么。有办法解决这个问题吗？？

Answer 1

你应该在开始一个新的之前清除超时，但除此之外，我建议将弹出窗口的所需行为封装在别处，这样它就不会绑定(bind)到 click 函数:

function Popup() {
    var timer = null;
    var $el = $('<div>', {
        id: 'test',
        class: 'arrow_box'
    }).appendTo(document.body).hide();

    this.show = function (text) {
        $el.text(text).stop(true, true).show();
        clearTimeout(timer);
        timer = setTimeout(function () {
            $el.hide('slow');
        }, 3000);
    }
}

var popup = new Popup();
$('.item ').on('click', function () {
    popup.show('You just added an '+ $(this).text() + '!');
});

请注意，将元素保留在 DOM 中(但隐藏)可以让动画更加灵活 - 例如您可以使弹出窗口淡出而不是简单地眨眼不存在。

演示在 http://jsfiddle.net/alnitak/4et4cctr/