javascript - 删除()函数完成时如何执行类型()函数

Question

这是一个打字动画JS，这里有两个功能正常工作type()当我们点击类型按钮和 erase() 时的功能当我们点击删除按钮时的功能。
但现在我想在这里创建一个新函数 Erase and Retype意味着我想要 - 当句子完全输入然后如果我们点击Erase and Retype按钮，然后它应该被删除并重新输入一次。

var captionLength = 0;
var caption = '';


$(document).ready(function () {
  captionEl = $('#caption');

  $('#test-typing').click(function () {
    testTypingEffect();
  });

  $('#test-erasing').click(function () {
    testErasingEffect();
  });
});

function testTypingEffect() {
  caption =  $("#qqq").html();
  type();
}

function type() {
  captionEl.html(caption.substr(0, captionLength++));
  if (captionLength < caption.length + 1) {
    setTimeout('type()', 5);
  } else {
    captionLength = 0;
    caption = '';
  }
}

function testErasingEffect() {
  caption = captionEl.html();
  captionLength = caption.length;
  if (captionLength > 0) {
    erase();
  } else {
    $('#caption').html("You didn't write anything to erase, but that's ok!");
    setTimeout('testErasingEffect()', 1000);
  }
}

function erase() {
  captionEl.html(caption.substr(0, captionLength--));
  if (captionLength >= 0) {
    setTimeout('erase()', 5);
  } else {
    captionLength = 0;
    caption = '';
  }
}

<div id="qqq">this is some example sentence which I want to </div>

    
    <input type="button" id="test-typing" value=" Type" />
    <input type="button" id="test-erasing" value="Erase" />  
    <input type="button" id="test-erase-and-retype" value="Erase & Retype" /> 
<br><br>

<span id="caption"></span>


  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

我试过 this help ，但我没有成功，我可以知道我应该做什么。
我已经尝试过这段代码:
使用回调:

  $('#test-erase-and-retype').click(function () {
testErasingEffect(function () {
    testTypingEffect();
});
  });

使用 when 和 then 条件:

  $('#test-erase-and-retype').click(function () {
  
   $.when(testErasingEffect()).then(testTypingEffect());
      
  });

和这个

  $('#test-erase-and-retype').click(function () {

    function firstFunction(){
        testErasingEffect();
    }
    function secondFunction(){
        testTypingEffect();
    }
    
    firstFunction();
});

但是所有这些都不起作用，这只会删除文本而不是重新输入。
我能知道犯了什么错误吗？

Answer 1

首先，有一个链接，我在其中获取了有关 adding waiting time into loop 的代码.
其次，我重写了你的代码。您可以对此投反对票，但在我看来，它对您的项目来说更清洁、更容易操作。

$(document).ready(function () {
    $('#test-typing').click(function () {
        type();
    });

    $('#test-erasing').click(function () {
        erase();
    });

    $('#test-erase-and-retype').click(function () {
        loop();
    });
});

const timer = ms => new Promise(res => setTimeout(res, ms));

const wait = 15;//set the waiting time between adding/removing caracters

async function type() {
    while(document.getElementById('caption').innerHTML.length < document.getElementById('qqq').innerHTML.length) {
        document.getElementById('caption').innerHTML += document.getElementById('qqq').innerHTML.charAt(document.getElementById('caption').innerHTML.length);
        await timer(wait);
    }
}

async function erase() {
    while(document.getElementById('caption').innerHTML.length > 0) {
        document.getElementById('caption').innerHTML = document.getElementById('caption').innerHTML.slice(0, -1);
        await timer(wait);
    }
}

async function loop() {
    await erase();
    await type();
}

<div id="qqq">this is some example sentence which I want to </div>

    
    <input type="button" id="test-typing" value=" Type" />
    <input type="button" id="test-erasing" value="Erase" />  
    <input type="button" id="test-erase-and-retype" value="Erase & Retype" /> 
<br><br>

<span id="caption"></span>


  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

OP 在评论中询问了这一点:
但是有 type();功能在完成 promise 后不再工作，你能不能让它多次使用，意味着当我们点击 type() 时；然后它应该再次输入句子
我对此的回答:
根据您的项目，您将希望使您的功能尽可能简单。尝试让他们做一件事并链接多个功能。因此，在这种情况下，如果 capion.innerHtml 中已经存在某些内容，请在以下位置进行条件检查:

    $('#test-typing').click(function () {
        if (document.getElementById('caption').innerHTML.length > 0) {
            document.getElementById('caption').innerHTML = '';
        }
        type();
    });

通过以下代码，您可以了解如何开始重用您的代码。这是可扩展的。而且，在我看来，它更容易使用，因为每件事都被分离成一个代码块，你可以更快地操纵发生的事情。

const timer = ms => new Promise(res => setTimeout(res, ms));

const wait = 15;//set the waiting time between adding/removing caracters

async function clickEventType(container, stringToType) {
    if (document.getElementById(container).innerHTML.length > 0) {
        // document.getElementById(container).innerHTML = '';// You can simply flush the container
        var response = await erase(container);// You can also make a call on erase container, which will do the same as the loop...
    } else {
        var response = true;
    }
    if (response !== undefined) {
        await type(container, stringToType);
    }
}

async function type(container, stringToType) {
    while(document.getElementById(container).innerHTML.length < document.getElementById(stringToType).innerHTML.length) {
        document.getElementById(container).innerHTML += document.getElementById(stringToType).innerHTML.charAt(document.getElementById(container).innerHTML.length);
        await timer(wait);
    }
    return true;
}

async function erase(container) {
    while(document.getElementById(container).innerHTML.length > 0) {
        document.getElementById(container).innerHTML = document.getElementById(container).innerHTML.slice(0, -1);
        await timer(wait);
    }
    return true;
}

async function loop(container, stringToType) {
    var response = await erase(container);
    if (response !== undefined) {
        await type(container, stringToType);
    }
}

<div id="qqq">this is some example sentence which I want to </div>
<div id="qq2">Another cool sentence where you can use style="display: none;"</div>
<div id="qq3" style="display: none;">This is the coolest sentence!?</div>

    
    <input type="button" onClick="clickEventType('caption', 'qqq')" value="Type qqq into caption"/>
    <input type="button" onClick="clickEventType('caption2', 'qq2')" value="Type qq2 into caption2"/>
    <input type="button" onClick="erase('caption')" value="Erase caption"/>
    <input type="button" onClick="clickEventType('caption', 'qqq')" value="Loop qqq into caption"/>
    <input type="button" onClick="clickEventType('caption2', 'qq3')" value="Type qq3 into caption2"/>
<br><br>

<div><span id="caption"></span></div>
<div><span id="caption2"></span></div>


  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>