2015-02-24 2 views
2

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

Допустим, что для загрузки страницы требуется около 3 секунд. А для загрузки страницы 2 требуется 2 секунды. Я получаю, что оба запускаются одновременно, и запрос страницы1 возвращается после 3 секунд.

Но проблема в том, что запрос страницы2 возвращается через 5 секунд. Почему это так? Я думал, что каждый запрос AJAX будет запускаться в своем потоке. Так почему очередь? Почему второй ждет, когда первый ответит, даже если он начнет?

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

$.ajax({ 
    type: "POST", 
    url: 'page1.php', 
    data: { } 
}) 
.done(function(data) {     
    console.log(data); 
}); 
$.ajax({ 
    type: "POST", 
    url: 'page2.php', 
    data: { } 
}) 
.done(function(data) {     
    console.log(data); 
}); 

Я вижу много примеров, используя этот подход.

$.when(
    $.get("/resource1"), 
    $.get("/resource2"), 
    $.get("/resource3") 
).done(function(response1, response2, response3) { 
// do things with response1, response2 and response3; 
}); 

Но насколько я понимаю, он будет обрабатывать ответы, как только все они вернутся.

Любые идеи по этому вопросу?

+0

вам нужно добавить дополнительное свойство 'async: true'. Если вы установите async: true, тогда этот оператор начнет выполнение, и следующий оператор будет вызван независимо от того, завершен ли оператор async. – Manoj

+2

'async: true' по умолчанию не нужно явно устанавливать его. @Manoz – Jai

+0

Yep thats true, async по умолчанию true, и я уже пробовал это. – ZSchneidi

ответ

2

Дайте асинхронный: true Запрос будет обработан неспешно!

$.ajax({ 
      url: 'test.html', 
      async: true, 
      success: function (data) { alert(data); } 
     }); 
+0

, как сказано в комментариях выше, асинхронно по умолчанию. – ZSchneidi

+0

Отклик ответа зависит от размера запроса и ответа. async работает только на том, хотите ли вы одновременно запросить запрос или один за другим? – Ila

4

вы первый пример кода гарантии для выполнения кода, когда любой запрос AJAX завершен и процессор бесплатно использовать. Do NOT Забудьте о двигателе JS одной нитью и его очередей задач, которые необходимо выполнить, когда процессор свободен.

Если ваш первый завершенный запрос AJAX (A1) занимает 10 секунд, и в течение этого времени завершается второй запрос AJAX (A2), A2 должен ждать, потому что процессор обрабатывает код для A1.

Подробнее см. Здесь https://www.youtube.com/watch?v=8aGhZQkoFbQ. В этом видео Филипп Робертс описывает, как циклы событий работают в браузерах.

+0

Хорошо, это довольно интересно. И я бы это понял, но использовал ваш пример. Если A1 нуждается в 10 секундах и позволяет сказать, что A2 нуждается в 2 секундах, и оба были отправлены в то же время, почему A2 возвращается через 12 секунд, а не как только A1 возвращается? – ZSchneidi

+2

Я создал простой образец в [здесь] (http://jsfiddle.net/fb1Lvbf6/2/). A1 загружается на 10 секунд, а A2 занимает 2 секунды.Кажется, A2 был сделан первым, а A1 - через 8 секунд. –

+0

Теперь я понимаю это немного лучше. Что может быть лучшим решением для этой проблемы? Как мне удается одновременно загружать трудоемкие детали? – ZSchneidi

0

Если вы используете PHP и сеансы, основанные на файлах, вы можете ограничить страницу одним запросом на (PHP). Вы должны закрыть сеанс для обработки нескольких запросов одновременно. См. https://stackoverflow.com/a/8065977/1620112 для решения этого.

Смежные вопросы