Question

所以我有这个fiddle here在右下角添加一个div，以便在用户添加项目时通知用户（点击item1 .. item5 divs上的事件）。几秒后，这个div会自我毁灭（div.remove()）。

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

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

第一个问题是在不到3秒的时间内添加几个div会导致很多div无法看到下面的div。所以我在.click()事件中添加了这一行，然后再做其他事情了。

$（ '＃试验'）除去（）;

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

Answer 1

尝试此操作：将时间间隔存储在变量中，并在每次点击item时将其清除，以便之前设置的#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);
});

<强> DEMO

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/

演示

在自毁div setTimeout（function（）{...}，3000）上刷新计时器;

2 个答案: