Поочередное выполнение задач с Promise

237
19 декабря 2017, 17:29

Я создал небольшой скрипт на промисах, который поочередно выполняет 2 функции, но мне не нравиться его структура. Мне не нравиться что промис ожидает решения не выполнения самой функции, а дополнительно рассчитанной величины для setTimeout. Мне так же не нравиться что для очередности действия я вложил промис в промис, так есть сначала я жду окончание удаления, потом окончание добавления, а не делаю все одним промисом, то есть выполнил удаление, then - выполнил добавление.

Вот пример проблемы с задержкой: 

let p1 = new Promise(
   (resolve, reject) => {
        removeLine();            //рабочая функция, выполнение которой я ожидаю
        window.setTimeout(
            function() {
                resolve(thisPromiseCount); 
            }, getText()*speed); //<- ждем столько, сколько строк*скорость
    }
);

Я тут ибо я хочу узнать нет ли какого-либо другого решения этому? Могу ли я просто подождать выполнение функции, чего бы внутри нее не было и приступить к следующему этапу что бы вот не делать такие задержки в промисах? Явно ж должно быть решение. Хотя при этом хочется что бы вся структура не нарушилась (так есть если я добавлю какой либо скрипт часов, что бы он не заморозился в ожидании выполнения функции, придирчивый я сильно).

Прилагаю рабочий пример моего кода ниже для удобного анализа для решения вопроса. Благодарю за внимание!

var el = $("#t"); 
var speed = 200; 
var delay = 2000; 
var N = 6; 
 
function removeLine() { 
	console.log("lines removed"); 
  el.empty(); 
} 
function addLine(N) { 
  for (i=0; i<=N; i++) { 
    (function(i) { 
      setTimeout(function() { 
        console.log("#"+i+" line generated"); 
        el.append("<p>Line #"+i+" is here!</p>"); 
      }, speed * i); 
    })(i) 
  } 
} 
function getText() { 
	return $(el).find("p").length; 
} 
 
var promiseCount = 0; 
 
function testPromise() { 
    let thisPromiseCount = ++promiseCount; 
 
    let p1 = new Promise( 
       (resolve, reject) => { 
            removeLine(); 
            window.setTimeout( 
                function() { 
                    resolve(thisPromiseCount); 
                }, getText()*speed); 
        } 
    ); 
 
    p1.then( 
        function(val) { 
            let p2 = new Promise( 
            (resolve, reject) => { 
            		addLine(thisPromiseCount-1); 
                window.setTimeout( 
                  function() { 
                    resolve(thisPromiseCount); 
                  }, thisPromiseCount*speed + delay); 
            }); 
             
            p2.then( 
            	function(val) { 
                	if (val == N) return; 
                	testPromise(); 
            	} 
            ).catch((reason) => { 
            		console.log('Handle rejected promise ('+reason+') here.'); 
            }); 
        }).catch((reason) => { 
            console.log('Handle rejected promise ('+reason+') here.'); 
        }); 
} 
 
setTimeout(testPromise, 5000);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div id="t">Hello World!</div>

READ ALSO
pickadate назначение переменной onSet
jQuery

pickadate назначение переменной onSet

Использую библиотеку pickadate для выбора даты в форме

 190
Как применить динамический SVG градиент?
jQuery

Как применить динамический SVG градиент?

Делаю градиент с помощью jQuery, добавляю этот градиент в SVG указываю свойства fill, но ничего не происходит:

 205
Скролл до блока с учетом высоты фиксированного меню
jQuery

Скролл до блока с учетом высоты фиксированного меню

Здравствуйте, этим кодом я реализую скролл до блока

 211
Открыть magnific popup галлерею в новом окне
jQuery

Открыть magnific popup галлерею в новом окне

Есть код:

 251