Как подгружать данные ajax с setInterval?

Здравствуйте, я делаю свой ajax запрос и получаю все свои данные, но мне нужно чтобы когда в бд появлялись новый записи, то на страницу автоматом подгружалась новая запись! Как это можно реализовать правильно?
Вот мой ajax:
window.onload = () => {
                $.ajax({
                    type: "GET",
                    url: "/feed/ajax",
                    dataType: 'json',
                    success: function (data) {
                        if (data) {
                            const feedC = document.querySelector('.itemFeed')

                            data.forEach((arrayItem) => {
                                if (typeof arrayItem === 'object') {


                                    const createFeedItem = document.createElement("div")
                                    const feedI = createFeedItem.className = 'feed__container'
                                    feedC.append(createFeedItem)


                                    createFeedItem.innerHTML = '<img src="../../assets/image/feed/' + arrayItem.image + '">' +
                                        '<div class="name_feed"><a href="feed/article/' + arrayItem.uid + '">'+ arrayItem.name +'</a></div>' +
                                        '</div>'


                                }
                            })
                        }
                    },
                    error: function (r) {
                        console.log(r)
                        alert("Ошибка ajax");
                    }
                });
        }
  • Вопрос задан
  • 418 просмотров
Пригласить эксперта
Ответы на вопрос 1
@eandr_67
web-программист (*AMP, Go, JavaScript, вёрстка).
Да, можно использовать и AJAX (посылая запросы раз в несколько секунд), но всё же для для таких задач есть специально предназначенные для этого механизмы:
https://learn.javascript.ru/network - пункты 10, 11, 12

AJAX-вариант - раз в 5 секунд:
let busy = false; // чтобы не накладывать запросы друг на друга
setInterval(function() {
  if (busy) { return; }
  busy = true;
  $.ajax({
    ...
    success: function (data) {
       ...
       busy = false;
    },
    error: function (r) {
       ...
       busy = false;
    }
  });
}, 5000);

Предложенный в комментариях вариант через setTimeout:
(function load() {
  $.ajax({
    ...
    success: function (data) {
       ...
       setTimeout(load, 5000);
    },
    error: function (r) {
       ...
       setTimeout(load, 5000);
    }
  });
})();
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы