Как реализовать интервальный вывод уведомлений в js?

Question

[Username]

Добрый день, необходимо через restApi получить массив данных уведомлений, и выводить эти уведомления с определённым интервалом, показали уведомление, оно повисело секунды 3, удалили, на этом месте отобразили другое. Как только все уведомления показали, нужно подключиться к серверу и получить новую порцию уведомлений и так происходит до тех пор пока открыта вкладка в браузере.

Моя реализация:

var displayTime = 3000;
getNotification();

function getNotification() {
    var xhttp = new XMLHttpRequest();
    var requestURL = '/front/api/get-notifications';
    xhttp.open("GET", requestURL, true);
    xhttp.send();
    xhttp.onreadystatechange = function () {
        if (xhttp.readyState == 4 && xhttp.status == 200) {
            var apiResponse = xhttp.responseText;
            var configSP = JSON.parse(apiResponse);
            console.log(configSP);
            initSP(configSP, 0);
        }
    };
}

function initSP(configSP, i) {
    if (i >= configSP.notifications.length)
        getNotification();
    var htmlNotif = '<img src="' + configSP.notifications[i].productImg + '" class="photo">';

   //Производим вставку в вёрстку    
    
    setTimeout(function run() {
        closeNotification();//Удаляем из DOM дерева элемент
        initSP(configSP, ++i);
        setTimeout(run, displayTime);
    }, displayTime);
}

Но почему-то на втором получении данных происходят следующие ошибки.

Answer 1

[Sayonji]

Вы забыли кое-что.

if (i >= configSP.notifications.length) {
    getNotification();
    return;
}

Comments

[Username]

От одной ошибки удалось избавиться, вторая так и осталась s8.hostingkartinok.com/uploads/images/2017/02/48f0...

[Sayonji]

Username: Мне кажется, что эта строчка лишняя: setTimeout(run, displayTime);

[Username]

Sayonji: По поводу return, js никогда до него не дойдёт ведь, зачем тогда прописывать?

[Sayonji]

Username: Дойдет, сразу после выполнения getNotification. Вы же сами сказали, что ошибка исправилась.

[Username]

Sayonji: Выполнит getNotification внутри этой функции вызовет initSPи так будет продолжаться до тех пор пока открыта вкладка

[Sayonji]

Username: Почитайте про то, как работает xhr в джаваскрипте. Если вкратце, то вот это место xhttp.onreadystatechange = function () {...} назначает действие, которое выполнится после того, как xhr завершится. Сама функция, содержащая этот код, не прекратит свое выполнение, т. е. в вашем случае она завершится и код вернется в то место, где она была вызвана. А на xhr ответ придет когда-то там, всё это время js само собой не остановлен (иначе бы интерфейс браузера зависал).

[Username]

Sayonji: Спасибо за ответ, а как можно отменить выполнение циклической вставки вёрстки, сейчас при переходе на другую страницу сайта, происходит двойная вставка, если сделать ещё один переход, то тройная и.т.д. страницы переключаются посредством ajax, есть даже метод у сайта, который сообщает о смене страницы.

Answer 2

[Михаил Белошицкий]

Я бы это все через очередь реализовал, честно говоря. Примерно так (псевдокод).

Comments

[Username]

Спасибо за ответ, а как можно отменить выполнение циклической вставки вёрстки, сейчас при переходе на другую страницу сайта, происходит двойная вставка, если сделать ещё один переход, то тройная и.т.д. страницы переключаются посредством ajax, есть даже метод у сайта, который сообщает о смене страницы.