时间戳

首页 > 解决方案 > 擦除（）函数完成时如何执行类型（）函数

javascript - 擦除（）函数完成时如何执行类型（）函数

问题描述

这是一个打字动画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>

我尝试了这个帮助，但我没有成功我能知道我应该做什么。

我已经尝试过这段代码：

使用回调：


  $('#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();
});

但是所有这些都不起作用，这只会擦除文本而不是重新输入。

我能知道犯了什么错误吗？

标签： javascripthtmljquery

解决方案

首先，有一个链接，我在其中获取了有关将等待时间添加到循环中的代码。

其次，我重写了你的代码。您可以对此投反对票，但在我看来，它对您的项目来说更清洁、更容易操作。

$(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(); 功能在完成承诺后不再工作，你能不能让它多次使用，意味着当我们点击 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>

推荐阅读