Добавление нескольких div с использованием таймера javascript

Question

Я искал и пытался понять, как изменить div с помощью javascript и использовать таймер, но не совсем понял.

Я работаю с API, который выводит json. В настоящий момент мне удалось отформатировать его с помощью моей функции и дать каждому «элементу» (заданию) уникальный div, в котором можно жить. То, что я пытаюсь сделать сейчас, это сделать функцию, которая использует таймер для отображения содержимого каждого div. И он должен делать это без каких-либо нажатий кнопок.

Оператор if в моей функции предназначен только для ограничения выхода.

Моя функция:

function getAllOrdersAjax() { 

    $.get('/api/ordersystem', function(data){ 

     var orderSystemDataAppendToView = []; 
     var i = 0; 

     $(data).each(function(key, value){ 

      //Add's up the products sold to customer 
      for(var j = 0 in value['order_products']) 
      { 
       j++ 
      } 

      //Sends the information to view 
      orderSystemDataAppendToView.push('<div id="product' + i + '"><h3> ID: ' + value['customer'].id + '</h3>' + '<p> Kundenavn: ' + value['customer'].name + 
       '</p>' + '<p> Selger: ' + value['sold_by'].firstname + ' ' + value['sold_by'].lastname + '</p>' + 
       '<p> Antall produkter solgt : ' + j + '</p>' + '<p> Pris : ' + value['price'] + '</p>' + '</div>'); 

      if(i === 10){ 
       return false; 
      } 

      i++; 
     }); 

     $('#hei').html(orderSystemDataAppendToView).append(); 

    }) 
} 

Для каждого задания в DIV получает ID: product0, product1, product2, ....

Как я могу отобразить эти DIV один за другим с в комплект интервал в моем индексном файле. И как я могу назвать функцию тогда?

Спасибо за помощь!

Answer 1

Вам просто нужно перевернуть функцию setTimeout() и использовать непосредственно append(). Что-то вроде:

function getAllOrdersAjax() { 

    $.get('/api/ordersystem', function(data){ 

    var i = 0; 
    // We store the element so that we don't look for it at each iteration 
    var parent = $('#hei'); 
    $(data).each(function(key, value){ 

     //Add's up the products sold to customer 
     for(var j = 0 in value['order_products']) 
     { 
      j++ 
     } 


     setTimeout(function(){ 
      //Appends the information 
      parent.append('<div id="product' + i + '"><h3> ID: ' + value['customer'].id + '</h3>' + '<p> Kundenavn: ' + value['customer'].name + 
      '</p>' + '<p> Selger: ' + value['sold_by'].firstname + ' ' + value['sold_by'].lastname + '</p>' + 
      '<p> Antall produkter solgt : ' + j + '</p>' + '<p> Pris : ' + value['price'] + '</p>' + '</div>'); 
     }, 1000 * i); // ~ 1s apart (first is instant as you init i=0) 

     i++; 

    }); 
    }); 
}