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

Question

[Architecktor133]

Есть три ф-ии. Пытался по-разному, остановился на таком варианте. Как организовать определённый порядок выполнения? Страница меняется, заголовок обновляется, звук воспроизводится

var refresh = function() {
	$.post('/index/refreshChats', {}, function(data) {
		if(data != false) {
			$('aside').fadeOut(300);
			$('aside').html(data);
			$('aside').fadeIn(300);
		}
	});
	if($('#send_button')[0]) {
		var id = $('#send_button').attr('user-id');
		var params = {
			'id': id
		}
		$.post('/index/refreshMessages', params, function(data) {
			if(data != false) {
				$('#messages').html(data);
				scrollMessages();
			}
		});
		setTimeout(function() {
			$('.dialog[user-id="' + id + '"]').addClass('active');
		}, 1000);
	}
};

var sound = function(isPlay) {
	$.post('/index/isPlay', {}, function(data) {
		if(data == true && isPlay == 1) {
			var audio = new Audio();
			audio.src = 'music/message.mp3';
			audio.autoplay = true;
		}
	});
}

var setTitle = function() {
	var title = 'Главная';
	var counter = $('#dialogCounter').html();

	if(counter != 0) {
		title = '(' + counter + ') СООБЩЕНИЯ';
	}

	$('title').html(title);

	return true;
}

var run = function() {
	setInterval(function() {
		refresh();
		setTitle();
		sound();
	}, 120000);
}

run();

Comments

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

Neoline: дваждый вызывать two() ? Фигня.

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

Architecktor133 функции все синхронные? Т.е. выполняются внутри тела и возвращают результат – тогда чем плох ваш код? Или в них ещё идёт скажем AJAX запрос с возвратом результата в callback?

Answer 1

[Виталий]

Вермешля в колбеках:

function f1(data, cb){
   let modify = data *2;
   cb(modify);
}
function f2(data, cb){
   let modify = data *2;
   cb(modify);
}
function f3(data, cb){
   let modify = data *2;
   cb(modify);
}

f1(2, function(data) { 
   f2(data, function(data2) {
       f3(data2, function(data3) { 
         console.log(data3); 
         });
      });
   });

Вариант с промисами:

function p1(data){
   return new Promise((resolve, reject)=>{
      try{
          resolve(data*2);
       } catch(error){
         reject(error);
      }
  });
}

function p2(data){
   return new Promise((resolve, reject)=>{
      try{
          resolve(data*2);
       } catch(error){
         reject(error);
      }
  });
}

function p3(data){
   return new Promise((resolve, reject)=>{
      try{
          resolve(data*2);
       } catch(error){
         reject(error);
      }
  });
}

p1(2).then(p2).then(p3).then(console.log).catch(console.error);
// Или
p1(2).then(data=>{
   p2(data).then(data=>{
      p3(data).then(data=>{
         console.log(data);
      }).catch(console.error);
   }).catch(console.error);
}).catch(console.error);

// Или если юзать асинк:

(async function(){
   try {
      let r1 = await p1(2);
      let r2 = await p2(r1);
      let r3 = await p3(r2);
      console.log(r3);
   } catch(error){
      throw error;
   }
})();

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

Comments

[Stalker_RED]

И почему мне "Вермешля в колбеках" кажется более читабельной, чем колбаса из промисов?

[Виталий]

Stalker_RED: потому что в примере умножение на 2 , а не обертывание асинзронных функций. А еще представь дерево выбора. В зависимости от этапа 2 в этапе 3 разные функции,

Answer 2

[Александр Манаков]

Без знания того, как выглядят ваши функции, нельзя понять, как выводить их по очереди.

Answer 3

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

Если функции синхронные, то просто последовательная запись их вызовов должна работать:

function setTitle() {...}
function refresh() {...}
function sound(isPlay) {...}
function run() {
    var queue = [ setTitle, refresh, sound ];
    for( var i=0; i<queue.length; i++) queue[i].call();
    setTimeout( run, 12e4);
}
run();