javascript - 如何删除具有相同名称但在不同时间的新 div

Question

我有一个 div，当你点击一个按钮时出现，并在 4 秒后被删除。
问题是当它出现几次后，前4秒后立即被移除
所以当我点击按钮时，div 会显示出来，4 秒后它会被删除，但是当我在 3 秒后再次点击按钮时，会出现另一个 div，它将在 1 秒后被删除。
我想每个 div 有 4 秒，你不知道该怎么做吗？

HTML

<button onclick='div()'>Add div</button>
<div class='content'></div>

JavaScript

function div(){
 $('.content').append('<div class="newDiv">text...</div>');

 setTimeout(function(){
   $('.newDiv').remove();
 }, 4000); 
}

Answer 1

记住您要添加的 div，然后删除那个:

function addDiv(){
    var div = $('<div class="newDiv">text...</div>');
    $('.content').append(div);

    setTimeout(function(){
        div.remove();
    }, 4000); 
}

(我更改了函数的名称，因为函数名称应该是动词，并且我在函数中使用 div 来引用 div。)

旁注:我建议不要使用 onXyz 属性样式的事件处理程序，尤其是因为这意味着您的事件处理程序函数必须是全局变量，并且全局命名空间是 拥挤。相反，选择按钮并使用 on:

$("selector-for-the-button").on("click", addDiv);

实例:

// Scoping function to avoid creating globals
(function() {
    var counter = 0; // Just for demonstration purposes, so we can tell them apart
    function addDiv(){
        var div = $('<div class="newDiv">div #' + counter + '...</div>');
        ++counter;
        $('.content').append(div);

        setTimeout(function(){
            div.remove();
        }, 1200); // Shortened time for demo
    }
    $(".add-div").on("click", addDiv);
})();

<button class="add-div">Add div</button>
<div class='content'></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>