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>

运行两个函数异步Javascript

1 个答案: