Обновление сайта, как только промежуточные участки готовы

Question

В зависимости от выбора, сделанного на веб-сайте, графики создаются на сервере, на котором работает Flask.

У меня проблема в том, что, например, генерация 10 разных сюжетов могут занять до 30 с. Чего я хочу добиться, так это начать обновлять веб-сайт, как только первый сюжет будет готов, а затем автоматически загрузить остальные, как только они будут готовы.

В настоящее время следующая функция AJAX выполняется, как только пользователь нажимает кнопку «Процесс» на веб-сайте:

    $.ajax({
        type: "POST",
        url: "/single",
        data: { athleteName1: $('#athleteName1').val(), style: $('#style').val()},
        success: function (results) {
            $('#results').empty().append(results);
            $('#results').show();
            $('#submitbutton').prop('disabled', false);
        },
        error: function (error) {
            console.log(error);
        }
    });

На сайте сервера графики создаются и встраиваются в div-контейнеры. Впоследствии они объединяются и возвращаются на веб-сайт сразу как «diagStr»:

@app.route('/single', methods=['POST', 'GET'])
def single():
    loop 10 times:
        diagStr += generate_plot()
    return Markup(diagStr)

Выполнение этого с «Потоковым контентом» может быть только частью решения, поскольку AJAX ожидает получения полного ответа.

Есть идеи, как решить эту проблему с помощью современных технологий?

Answer 1

Это можно сделать несколькими способами, но есть несколько простых примеров:

• выполняет цикл на стороне клиента и генерирует 10 отдельных запросов Ajax, обновляя веб-страницу при получении каждого ответа.
• если вы заранее не знаете на стороне клиента, сколько у вас будет циклов, то используйте один запрос, и сервер отправит ответ, как только завершится первый цикл, вместе сфлаг, указывающий, есть ли больше циклов или нет - клиент может посмотреть на этот флаг и создать новый Ajax-запрос, если есть больше циклов.