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

Question

[Артём Белых]

Здравствуйте, я делаю свой 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");
                    }
                });
        }

Comments

[dmitry-toster]

webSocket

Answer 1

[Андрей Ежгуров]

Да, можно использовать и 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);
    }
  });
})();

Comments

[Ярослав Иванов]

Через setTimeout решается без всяких busy

[Артём Белых]

Ярослав Иванов, Подскажите, как это можно сделать!?

[Артём Белых]

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

[Андрей Ежгуров]

Артем, Так ведь сокеты - это столь же "чистый JS", как и AJAX. И в ссылке, что я дал, 3 разных метода - не только сокеты.

[Somewhere Intech]

Андрей Ежгуров, а переменная busy разве не будет true при каждом исполнении вложенной функции?

[Андрей Ежгуров]

Somewhere Intech, Спасибо, поправил.