Как вызвать два setTimeout в цикле?

Question

[ilanagrk]

Мне нужно сделать pop-up, который всплывает, 15 секунд висит в углу окна, затем пропадает (как, например, в ВК). Через 10 секунд все повторяется, но с новыми данными, которые берутся из массива. Вот код:

$(document).ready(function () {
    var clients= [
				{person: 'Дмитрий', sum: '245'},
				{person: 'Анна', sum: '450'},
				{person: 'Виталий', sum: '325'}
			];
for (let i = 0; i<clients.length; i++) {
                (function (e) {
                    setTimeout(function () {
                        const person = clients[i].person;
                        const city = clients[i].city;
                        const sum = clients[i].sum;
                        $(".pop-up__wrapper").html('<div class="pop-up show">' +
                            '<p>' + person +  'оформил заявку и получил <span class="hl-text">' + sum + ' UAH</span> к доходу</p>' +
                            '<div class="close-pop-up"></div></div>');
                    }, 10000 * (i + 1));
                })(i);
                (function (e) {
                    setTimeout(function () {
                        $('.pop-up').removeClass('show');
                    }, 15000 * (i + 1));
                })(i);
			}
        });

У меня получается, что оба timeOut-а работают сами по себе. Что я делаю не так?

Answer 1

[Виктор Янышев]

Первый запускает второй, а не сначала первый следом второй, асинхронно и разве константы перезаписывается?

Comments

[qwead]

Где вы здесь увидели перезапись констант?

Answer 2

[Александр Таратин]

https://github.com/CodeSeven/toastr
codeseven.github.io/toastr/demo.html

Answer 3

[Дмитрий Беляев]

function delay(t) {
  return new Promise(resolve => setTimeout(resolve, t));
}
//...
clients.reduce((p, {person, city, sum}, i) => p.then(() => delay(10000 * (i + 1))).then(() => {
  //show code
}).then(() => delay(15000 * (i + 1))).then(() => {
  //hide code
}), Promise.resolve());

Answer 4

[Александр Гре]

Внутри функций нужно "i" заменить на "e"