Как безопасно полагаться на данные Ajax, присутствующие

Question

В настоящее время я работаю над решением SharePoint 2013, и мы широко используем Javascript и jQuery. Я столкнулся с довольно раздражающей проблемой, которую я не могу понять. Пожалуйста, имейте в виду, что я не использовал Javascript в прошлом.

У меня есть список библиотек изображений в моем решении SharePoint, в котором хранятся изображения для веб-части, использующей фреймворк Slides.js для отображения изображений. Чтобы получить изображения, я должен использовать Ajax для получения изображений из списка библиотек, а затем применить slidesjs к моему div-контейнеру в файле .ascx.

Поскольку Ajax возвращает данные, когда они готовы, я не могу быть уверенным, что данные присутствуют во время применения рамки slides.js к неупорядоченному списку в моей разметке. Данные могут быть там, или нет. И как вы могли догадаться; если его там нет, он просто не работает.

Чтобы обойти проблему для демонстрационных целей, я добавил setTimeout, так что slides.js не применяется до 300 мс, но это уродливое исправление, от которого я хочу избавиться. И это нестабильно.

Итак, чтобы обернуть, мой вопрос в основном; можно ли безопасно полагаться на данные Ajax, которые будут присутствовать одновременно, и если да, то как?

Не стесняйтесь, спрашивайте о дополнительной информации.

Заранее спасибо.

Edit:Добавлен код

Вот мои варианты Аякса

var ajaxOpts = { 
    url: web + endpoint, 
    type: "GET", 
    headers: { "accept": "application/json;odata=verbose" }, 
    success: successHandler, 
    error: errorHandler 
} 

И successHandler

function successHandler (response) { 
    // Do response parsing 

    setTimeout(function() { 
     runSlider(); // basically jQuery("#slider").slidesjs(slidesOpts) 
    }, 300); 
} 

Answer 1

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

Существует два способа добиться успеха и завершения обратных вызовов. Внутри вариантов $ .ajax:

$.ajax("foo.php",{ 
    type: "get", 
    success: function(data){ 
     // do something with data, it is available within this scope 
    }, 
    complete: function(data){ 
     // do something with data, it is available within this scope 
    } 
}) 

или используют методы jqXHR

$.ajax("foo.php",{ 
    type: "get" 
}).done(function(data){ 
    // do something with data, it is available within this scope 
}).always(function(data){ 
    // do something with data, it is available within this scope 
}); 

Примечание, вы можете также передать XHR вокруг вашего кода по мере необходимости, так что вы можете использовать данные в другом месте безопасно ,

var jqXHR = $.ajax("foo.php",{ 
    type: "get" 
}); 
$("#someEl").click(function(){ 
    jqXHR.done(function(data){ 
     // do something with data 
     alert(data); 
    }); 
}); 

Answer 2

В тех случаях вам нужно сделать какую-то 'synchronizity' с участием ajax-запросы, я вижу 2 варианта:

1. jQuery deferreds

2. Ajax async: ложь в запросе

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

Пример использования:

JQuery deferreds:

$.when(ajaxRequest).done(function(){ 
...//do stuff with sliders 
}); 

or using async false: 

$.ajax({ 
    url : "/controller/action", 
    async : false, 
    ... 
    success: function(){ 
    ...// do stuff 
    } 
}) 

Если у вас нет сложных требований, просто сделать, как другие ответы говорят и делать вещи в вашем Аяксе success вызова

Answer 3

Вы можете использовать обратные вызовы success или complete в запросе AJAX. Когда AJAX завершает работу, запустите функцию, помещая слайды в слайдер.

$.ajax({ 
    type:'POST', 
    url: myURL.php, 
    dataType: "html", 
    complete: function (data) { 
     if (data !== null && data !== undefined) { // make sure data has been returned 
      // add slides here 
     } else { 
      alert("Slides not available"); 
     } 
    }, error: function() { 
     alert("Slides not available"); 
    } 
}); 

Тогда вы можете быть уверены, что, когда AJAX был запущен, и был успешным, ваши добавление слайдов функция будет работать, как ожидалось.

Вы также можете сделать что-то более активное, как это, в качестве альтернативы. Это полезно, если вы вызываете несколько запросов AJAX и хотите знать, когда они завершили работу перед выполнением работы.

$.when(ajax1(), ajax2()).done(function(a1, a2) { 
    // the code here will be executed when both AJAX requests complete 
    // a1 & a2 contain lists of 3 items; the response text [0], 
    // the status [1], and an jqXHR object [2] for each of the listed AJAX calls 
    if (a1[0]) { 
     // add slides here 
    } 
    if (a2[0]) { 
     // do something else here 
    } 
}); 

function ajax1() { 
    $.ajax({ 
     type:'POST', 
     url: myURL.php, 
     dataType: "html" 
    }); 
} 

function ajax2() { 
    $.ajax({ 
     type:'POST', 
     url: myURL.php, 
     dataType: "html" 
    }); 
}