javascript - 将文本从数组添加到 div 并在 X 秒后将其删除

Question

我是第一次使用 JQuery，试图弄清楚一件事，但没有运气。我想做的是:

1. 从数组中获取值并将其打印到 div。
2. 等待 X 秒并从 div 中删除文本。
3. 移至数组中的下一个值，只要数组中还有值就重复该过程。

我得到以下代码，显示数组中的所有值，3 秒后它会删除所有不是我想要的内容:

Div 看起来像这样:

<div id="loader"></div>

脚本如下所示:

var cars = ["Saab", "Volvo", "BMW"];

for(var i=0; i<cars.length; ++i){
    $("#loader").append(cars[i] +"<br/>");

    setTimeout(function() {
        $( "#loader" ).empty();
    }, 3000);
}

Answer 1

设置超时

您在 setTimeout 中打包的任何内容都将在给定超时后执行。在你的例子中

setTimeout(function () {
    $("#loader").empty();
}, 3000);

setTimeout 在 3 秒后清除所有内容。相反，您需要在 3 秒后加载每个元素。

$(文档).ready()

我在您的问题中没有看到 $(document).ready() ，我假设您使用了它但没有提及它，或者您的脚本包含在文档末尾。使用 jQuery 时，您需要确保页面已呈现，然后才能在 DOM 元素上使用选择器。

代码示例

试试这个:

var cars = ["Saab", "Volvo", "BMW"];

$(document).ready(function () {
    loadItem(0);
});

function loadItem(index) {
    if (index < cars.length)
    {
        $('#loader').html(cars[index]);
        setTimeout(function () {
            loadItem(index + 1);
        }, 1000);
    }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="loader"></div>