Загрузка файла JSON с сервера

358
14 февраля 2017, 20:53

Значения в массив подгружаются с сервера, из файла формата JSON. При помощи функции приведенной ниже. На деле же все работает не очень быстро. Как я могу оптимизировать свою функцию?

data = "{"Id": 0, "Name": "Иван"},{"Id": 1,"Name": "Петр"}" 
 
$(doc).ready(function () { 
	var jsonLoad = "URL"; 
    $.getJSON(jsonLoad, function(data) { 
        for (var i in data) { 
          arrName[i] = data[i].name; 
    });   
});

Количество позиций в data = 1000, чтобы каждый раз не обращаться к серверу и по одному значению не просить, решил что будет логично сразу их закинуть в массив за один заход, а потом уже с массивом работать. После записи в массив значения выводятся как список, как раз на этом этапе и замечаю, что происходит заметная глаза загрузка - то есть медленная для меня.

Answer 1

Как идея может лучше строить такой большой массив на стороне сервера сразу, а не делать запрос на тысячу записей на стороне клиента.

Но если так не позволяют обстоятельства, то можно использовать метод setTimeout (в теории) он вызовет асинхронное событие и при этом должен уменьшить нагрузку(проверил у себя на сайте). Как вариант создай прогресс бар, что бы показать что идет загрузка.

 var getMyJson = function(){
    var data = null;
    var xhr = new XMLHttpRequest();
    xhr.withCredentials = true;
    xhr.addEventListener("readystatechange", function () {
      if (this.readyState === 4) {
        var response = JSON.parse(this.responseText);
        for (var i in response.links){
            setTimeout(showInConsole, 0,response.links[i]) 
          }
      }
    });
    xhr.open("GET", "https://reddit-x-tymchenko.c9users.io/api/v1/links");
    xhr.setRequestHeader("cache-control", "no-cache");
    xhr.setRequestHeader("postman-token", "66bb89a6-b62e-ea00-fc00-0957c538193b");
    xhr.send(data);
  } 
  var showInConsole = function(obj){
    console.log(obj.title)
  }
getMyJson();
READ ALSO
Проблема с slick carousel

Проблема с slick carousel

На сайте есть слайдеры сделанные с помощью slick carouselНа одной странице установлена 2 слайдера все работает нормально

393
Как получить дочерние элементы SymbolItem (Paper.js)

Как получить дочерние элементы SymbolItem (Paper.js)

Имется, к примеру, такие элементы:

263
Meteor или Node.js + Socket.io + MongoDB + Vue.js?

Meteor или Node.js + Socket.io + MongoDB + Vue.js?

Существует задача по созданию крупного проекта, веб-приложения с риалтаймомСоздавая новый проект в ВебШторме, уже почти нажав на "Node

478
Эффект zoom внутри colorbox

Эффект zoom внутри colorbox

ЗдравствуйтеНа сайте галерея открывается при помощи colorbox

291