在自毁div setTimeout（函数（）{...}，3000）上刷新定时器；

Question

因此，我这里有一把小提琴，它在右下角添加了一个div，以在用户添加项目时通知用户（单击item1。item5divs上的事件）。此div在几秒钟后自毁（div.remove（））。

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

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

第一个问题是，在不到3秒内添加几个div会导致很多div无法看到下面的div。所以我在上添加了这一行。单击（）事件，然后再执行其他操作。

$（“#测试”）。删除（）；

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

Answer 1

尝试以下操作：将时间间隔存储在一个变量中，并在每次单击项时将其清除，这样以前为设置的时间间隔#test将被清除，并使用setTimeout设置新的时间间隔

var timer;//variable to store timeout
$('.item').click(function() {
    $('#test').remove();
    window.clearTimeout(timer);//clear timeout
    var element = "<div id='test' class='arrow_box'>You just added an "+$(this).text()+"!</div> ";

    $(document.body).append(element);
    //store timeout
    timer = setTimeout(function(){
      $('#test').remove();
    }, 3000);
});

演示

Answer 2

您应该在启动新的超时之前清除超时，但除此之外，我建议将弹出窗口的所需行为封装到其他位置，这样它就不会绑定到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/