Как обработать массив последовательно?

Question

[reaget]

Здравствуйте!

Есть массив arr, который мы будем обрабатывать.
Как нам пробежаться по нему, обрабатывая следующий элемент только тогда, когда обработали первый.

Есть такой пример с аякс. Мы передаем функции первый элемент. После того, как аякс выполнился, мы запускаем функцию рекурсивно, передав дальше массив, без первого элемента и так далее. Если массив пуст. Мы завершаем выполнение.

var array = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10'];

function send(arr) {
                        if (arr.length == 0)
                            return;
                            
                        let a = arr.splice(0, 1)[0];
                        $.ajax({
                    		url: '/assets/themes/theme/send.php',
                    		method: 'post',
                    		data: {
                    			text: a,
                    		},
                    		success: function(data) {
                    		    setTimeout(function() {
                    		        console.log("Done: ", a);
                    		        send(arr);
                    		    }, 2000);
                    		}
                    	});
                    }
                    
                     send(array);

Я не считаю это лучшим решением. Тем более, если у нас будет не аякс, а к примеру тяжелое вычисление данных, то этот код уже не подходит.

Основная задача, чтобы наш цикл выполнялся последовательно. Второй элемент выполняется только после того, как первый завершил работу.

Comments

[Kostya10295]

Циклы????

[reaget]

Kostya10295, Мы должны пройтись по всем элементам. Поэтому в конце написал циклы.

[Kostya10295]

reaget, просто я не понимаю почему Вы не можете использовать например for(), либо foreach. Если дело в асинхронности, то аякс можно выполнять синхронно

[Сергей Соколов]

не считаю это лучшим решением

Почему?

[reaget]

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

[Сергей Соколов]

reaget, размер стека вроде бы не фиксирован, но что-то около 15000.

Answer 1

[DrWeyber]

Сделать функцию, которая будет вызывать аякс с arr[i], и в зене вызывать эту же функцию с параметром arr[i+1], если он не false
Как-то так это вижу

Answer 2

[Kovalsky]

async function eatCookie(cookie) {
    // some asynchronous cookie eating
}

// or

function eatCookie(cookie) {
    // some cookie eating that returns a promise which should be resolved when eating is over
}

for (let cookie of cookies) {
    await eatCookie(cookie);
}

Answer 3

[DimaIs]

const array = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10'];

const processArray = async arrayToProcess => {
    for (let now = 0; now < arrayToProcess.length; now++) {
        const currentItem = arrayToProcess[now];
        await anyAsyncFunction(currentItem)
    }
}

const anyAsyncFunction = anyData => new Promise((resolve, reject) => {
    $.ajax({
        url: '/assets/themes/theme/send.php',
        method: 'post',
        data: {
            text: anyData,
        },
        success: resolve
    });
})

Comments

[reaget]

Нужно читать о промисах, чтобы писать такой код?

[reaget]

Можете краткие комментарии дать по коду, пожалуйста?)
Или сказать, что необходимо изучить, чтобы это понять.

[DimaIs]

reaget, Необходимо почитать о промисах, async/await и EventLoop, да. Ссылки:
Promise
Promise
Async await
EventLoop

[DimaIs]

reaget, если обобщить, то для каждого элемента массива мы запускаем асинхронную таску, дожидаемся ее выполнения и переходим к следующей

Answer 4

[Сергей Соколов]

var array = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10'];

array
// из каждого сделать функцию, возвращающую промис
.map((el) => () => new Promise((resolve, reject) => $.ajax({
  url: '/assets/themes/theme/send.php',
  method: 'post',
  data: {text: el},
  success: resolve,
  error: reject,
})))
// склеить цепочку
.reduce((acc, c) => acc.then(() => c()), Promise.resolve())
.catch(err => console.error(err));

Comments

[reaget]

Мы в данном случае вместо аякса можем любую функцию подставить?
Как промис понимает, что работа функции завершена?

[Сергей Соколов]

reaget, завершил - вызвать resolve() – первый из параметров. Произошла ошибка - вызвать второй: reject()

[Сергей Соколов]

reaget, тут в общем нормально всё описано: learn.javascript.ru/promise-basics