Мой запрос AJAX начинает волноваться после нескольких секунд работы - PullRequest
Новая
       8

Мой запрос AJAX начинает волноваться после нескольких секунд работы

0 голосов
/ 13 июня 2019

Я пытаюсь обновлять два элемента на моей странице каждые 4 секунды.Моя текущая настройка ajax выглядит следующим образом: 

     setInterval(function () {
        update()
     }, 4000);

     function update() {
        $.get('/hello', function (data) {
            console.log("update")
            $('#main').html(data);
        });
     }

Где мой HTML имеет div с id main, который содержит оба набора s.

После нескольких секунд работы мойсписки начинают дублировать элементы, как сумасшедшие, и страница начинает отставать.В консоли появляется сообщение об ошибке «недостаточно ресурсов».Кроме того, я заметил, что «обновление», которое должно быть зарегистрировано в консоли, происходит не каждые 4 секунды, скорее оно продолжает регистрироваться менее чем за 0,5 секунды.

Я пытался использоватьsetTimeout, но он не работает.

Код моего руля выглядит следующим образом: 

<div id="main">

    <div id="recalled">
        <ul id="list">
            {{#each thing}}
            <li>
              this.something
            </li>
            {{/each}}
        </ul>
    </div>

    <div id="more">
        <ul>
            {{#each anotherThing}}
            <li>
               this.property
            </li>
            {{/each}}
        </ul>
    </div>
</div>

Мой экспресс-код отображает всю страницу после поиска (асинхронно) в базе данных Монго. 

await User.find( {some search parameter}, function(error, data) {
res.render("thePage", {thing: data[0], anotherThing: data[1})
})

Данные, которые отображаются на начальном этапе, в порядке.

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

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

Ответы [ 2 ]

1 голос
/ 13 июня 2019

Взгляните на этот пост . В вашем текущем коде вы строго вызываете функцию обновления каждые 4 секунды, независимо от результата предыдущего вызова. Поскольку вызовы ajax являются асинхронными, вы должны использовать setTimeout, чтобы убедиться, что ваш предыдущий вызов завершен.

0 голосов
/ 13 июня 2019

Основная проблема в вашем коде - setInterval.setInterval звучит очень просто, но это, как правило, зло.Проблема с вашим кодом заключается в том, что setInterval отбрасывает, был ли запрос к серверу завершен или нет.Это просто складывает вызов после 4s (который может быть не 4 точно).Ваш вызов API иногда может занять более 4 секунд, после чего вы попадаете в беспорядок.

Есть много способов обойти это.Одним из простых решений будет использование 

setTimeout(update,4000)

, которое следует использовать после получения ответа от вызова API. 

function update() {
    $.get('/hello', function (data) {
        console.log("update")
        $('#main').html(data);
        setTimeout(update,4000)
    });
 }
...