Проблема с запуском двух функций асинхронного Javascript

Question

У меня довольно долго была проблема со страницей, я пробовал много подходов и не нашел решения, которое бы меня устраивало.Поэтому я даже не хочу задавать вопрос, я бы поставил на карту весь свой подход.Давайте начнем: я нашел здесь функцию пишущей машинки в SO, которая делает это:

function type(srcText, link = ''){

        var i = 0;
        var result = srcText[i];
        interval = setInterval(function() {

            if((i == srcText.length - 1) ) {

                clearInterval(interval);
                $('#typing').append(link);
                $('.show_a').css('display','none').fadeIn();

                return;
            }
            i++;
            result += srcText[i].replace("\n", "<br />");
            $("#typing").html(result);
        },50);

        return true;
    }

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

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

var test = function() {
    var promise = new Promise(function(resolve, reject){
       type(text[0], link[0])

    });
    return promise;
};

var test2 = function() {
    var promise = new Promise(function(resolve, reject){
       type(text[1], link[1])

    });
    return promise;
 };

Я назвал это так: test().then(test2()), но обе функции были вызваны одновременно, что вызвало бесконечный цикл.

Я сказал, что хочу поставить на карту весь подход, а это значит, что я хочу только сохранить функциональность.Означает, что строка все равно должна быть напечатана на экране, как печатная машинка.И после каждой строки, перед
, вставляется привязка.Я подумал о том, чтобы передать весь массив текстов и ссылок в функцию и позволить функции проверить, получил ли он массив или строку, а затем запустить цикл foreach и напечатать на экране только один элемент за другим или запустить только функциюкак вы видите выше.

Мой HTML выглядит следующим образом:

<div id="tft" class="w-100 text-white">
    <p id="typing" class="w-100"></p>
</div>

Данные, которые я использую, выглядят так (если это массив, в противном случае это просто строка):

var text = ['> text1 ','> text2'];
var link = ['<a class="show_a" href="http://link1" target="_blank">(click)</a>','<a class="show_a" href="http://link2" target="_blank">(click)</a>'];

Кстати.если я использую метод «цепочки», мне придется изменить часть, где результат выводится на экран.Потому что это на мгновение выполняется методом html (), который заставляет перезаписанное содержимое перезаписываться, когда второй элемент массива передается в функцию type ().

У кого-нибудь из вас есть идея или, по крайней мере, вы можете указать мне направление?Я как бы здесь потерялся.(

Answer 1

Трудно сказать, для чего именно вы собираетесь, но, используя обещания, вы можете заставить их идти один за другим с небольшими изменениями.

var text = ['> text1 ','> text2'];
var link = ['<a class="show_a" href="http://link1" target="_blank">(click)</a>','<a class="show_a" href="http://link2" target="_blank">(click)</a>'];

function type(srcText, link = ''){
   // Return a promise that resolves when the link is completed
   return new Promise((resolve, reject) => {
      var i = 0;
      var result = srcText[i];
      interval = setInterval(function() {
          if (i == srcText.length - 1) {
              clearInterval(interval);
              $('#typing').append(link);
              $('.show_a').css('display','none').fadeIn();
              resolve()
          }
          // This is modified so that it always appends instead of replaces
          i++;
          $("#typing").append(srcText[i])
      // I slowed this down so it is easier to see
      },500);
   });
}

// Call the first one
type(text[0], link[0])
// Once it's completed, start the second one
.then(function() { 
  type(text[1], link[1])
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="tft" class="w-100 text-white">
    <p id="typing" class="w-100"></p>
</div>