将文本从数组添加到 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 秒后加载每个元素。

$(document).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>

Answer 2

您可以通过结合 jQuery 的 delay() 和 queue() 方法来完全避免 setTimeout：

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

$.each(cars, function(_, val) {  //for each car ...
  $('#loader')                   
    .delay(1000)                 //wait 1 second
    .queue(function(next) {      //add to queue
      $(this).html(val);         //output car
      next();                    //continue with the next queued item
    });
});

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

Answer 3

简单的解决方案：

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

<script>
    var cars = ["Saab", "Volvo", "BMW"];

    function showCar(){
        if(cars.length != 0){
            document.getElementById('loader').innerHTML = cars.splice(0, 1);
            setTimeout(showCar, 3000);
        }
    }

    showCar();
</script>

Answer 4

这里我有一个很好的选择，它使用 setInterval 而不是 setTimeout 来 avoid 使用 loops

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

var i = 0;

var interval = setInterval(function(){
    if(i < cars.length){
        $( "#loader" ).text(cars[i]);
        i++;
    }else{
       // stop the timer 
       interval = null;
    }

},3000);

Answer 5

你需要更新你的代码

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


   function paintCar(){
        $( "#loader" ).empty();
        if(i != cars.length) {
              if(i < cars.length) {
                   $("#loader").append(cars[i] +"<br/>");
              }
              setTimeout(function() {
                paintCar(); 
              }, 3000);
        }

        i++;
   }
   paintCar();

供参考 - http://plnkr.co/edit/NPqDpXHPYoBCNOgDK5d6?p=preview