Как выполнить функции по очереди?

Question

[Павел]

Всем привет!

Подскажите как выполнить функции в порядке очереди?

$('.sortable-ui').sortable({
                    items: ".order_box:not(.nosort)",
                    connectWith: '.sortable-ui',
                    update: function(event, ui) {
                        var id = ui.item.parent().closest('.order_list').data('column');
                        ui.item.attr('data-column-item', id).addClass('updated'); // подставляю класс updated если изменилась колонка
                        $(this).children().each(function (index){
                            if ($(this).attr('data-position') != (index+1)) {
                                $(this).attr('data-position', (index+1)).addClass('updated'); // подставляю класс updated если изменилась позиция
                            }
                        });
                        saveNewPositions(); // это поиск классов $('.updated').each(function () {...}
                    }
                }).disableSelection();

Суть проблемы в том что выполняется вторая часть

$(this).children().each(function (index){
                            if ($(this).attr('data-position') != (index+1)) {
                                $(this).attr('data-position', (index+1)).addClass('updated'); // подставляю класс updated если изменилась позиция
                            }
                        });

и сразу за ней выполняется saveNewPositions(); не успев обработать первую

что тут можно сделать?

Comments

[yaroslav1996]

Промисы как варинат https://developer.mozilla.org/ru/docs/Web/JavaScri... или https://api.jquery.com/promise/

Answer 1

[PetrPo]

$(this).children().each(function (index){
	if ($(this).attr('data-position') != (index+1)) {
		$(this).attr('data-position', (index+1)).addClass('updated'); // подставляю класс updated если изменилась позиция
	}
}).promise().done(function() {
	saveNewPositions();
});

Comments

[Павел]

он также после выполнения второй части сразу выполняет saveNewPositions когда первая даже не успевает отработать

[Павел]

Если на первую вешаю то вторая не успевает отработать...

[PetrPo]

Если на первую вешаю то вторая не успевает отработать...

не понял

Выполни в консоли, такой простой пример, увидишь, что работает

var arr = [];

for(let i = 0; i < 5000; i++) {
	arr[i] = Math.floor(Math.random() * 300);
}

$(arr).each(function(index) {
	console.log('each');
}).promise().done(function() {
	console.log('stop');
});

[PetrPo]

Вообще щас модно использовать async await, попробуй так

$('.sortable-ui').sortable({
	items: ".order_box:not(.nosort)",
	connectWith: '.sortable-ui',
	update: async function(event, ui) {
		var id = ui.item.parent().closest('.order_list').data('column');
		ui.item.attr('data-column-item', id).addClass('updated'); // подставляю класс updated если изменилась колонка
		await $(this).children().each(function (index){
			if ($(this).attr('data-position') != (index+1)) {
				$(this).attr('data-position', (index+1)).addClass('updated'); // подставляю класс updated если изменилась позиция
			}
		});
		saveNewPositions(); // это поиск классов $('.updated').each(function () {...}
	}
}).disableSelection();

[PetrPo]

Или я вопрос не правильно понял... нужно дождаться окончания цикла each затем выполнить saveNewPositions() ?

[Павел]

PetrPo, сперва выполняется

var id = ui.item.parent().closest('.order_list').data('column');
    ui.item.attr('data-column-item', id).addClass('updated'); /

потом выполняется цикл each

и затем надо выполнить saveNewPositions()

[Павел]

а функция saveNewPositions(); как раз собирает добавленные классы .updated что делали выше

function saveNewPositions() {
                    var positions = [];
                    $('.updated').each(function () {
                        positions.push([$(this).attr('data-index'), $(this).attr('data-column-item'), $(this).attr('data-position')]);
                        $(this).removeClass('updated');
                    });

[PetrPo]

То есть у тебя вот этот код не успевает выполниться?

var id = ui.item.parent().closest('.order_list').data('column');
    ui.item.attr('data-column-item', id).addClass('updated');

[Павел]

PetrPo, либо первая либо вторая...

Если вторая раньше выполниться значит первая не успеет и хз как с этим жить

сейчас спасаюсь этим setTimeout(saveNewPositions, 500); но вроде как такое неправильно делать

[PetrPo]

ага, не правильно. Попробуй так, если не поможет, выложи код на codepen

$('.sortable-ui').sortable({
	items: ".order_box:not(.nosort)",
	connectWith: '.sortable-ui',
	update: async function(event, ui) {
		await (function() {
			var id = ui.item.closest('.order_list').data('column');
			ui.item.attr('data-column-item', id).addClass('updated');
		})();
		
		await $(this).children().each(function (index){
			if ($(this).attr('data-position') != (index+1)) {
				$(this).attr('data-position', (index+1)).addClass('updated'); // подставляю класс updated если изменилась позиция
			}
		});
		
		saveNewPositions(); // это поиск классов $('.updated').each(function () {...}
	}
}).disableSelection();

И думаю в этой строке parent() лишнее

var id = ui.item.parent().closest('.order_list').data('column');

[PetrPo]

Поправил код выше, не помогло?

[Павел]

Действительно, работает, афигеть, не придется с setTimeout жить

[Павел]

Спасибо вам!

Answer 2

[Антон Шаманов]

https://ruseller.com/lessons.php?id=1382 статья по promise

Comments

[Павел]

уже перечитал, все равно не понимаю как применить ее, там примеры где есть конкретные функции, а тут порядок выполнения внутри функции... разделить этапы внутри функции тоже не знаю как

как это применить?

[Антон Шаманов]

Павел, в jquery можно так

$this.children().each(function (index) {
    if ($this.attr('data-position') != (index + 1)) {
        $this.attr('data-position', index + 1).addClass('updated'); 
    }
}).then(saveNewPositions());