倒向打字效应

Question

我正试图用我的代码获得一个反向输入的效果。所以<P>会说“很快就来”，然后向后输入。然后将前向键入"SeaDogs.com.eu.as“

到目前为止，这就是我所拥有的，因为某种原因，它很快就会倒退两次？这是我试图克服的第一次冲撞。试着拖延几秒钟，这样它就能显示出“很快”这个词。

​

var str = 'Coming Soon';
var remove = false;
var i = str.length;
var isTag;
var text;

(function type() {
  if (!remove) {
    text = str.slice(0, --i);
    if (text === str) return;
  }

  if (!isTag) {
    document.getElementById("demo").innerHTML = text;
  }



  setTimeout(type, 520);

}());

<p id="demo"></p>

​

Answer 1

直接用异步/等待方式编写逻辑代码比篡改超时要干净得多：

​

function delay(time) {
    return new Promise(r =>
        setTimeout(r, time))
}

async function typeAnimation(div, rtl, text, time) {
    for (let i = 1; i <= text.length; i++) {
        div.innerText = text.slice(0, rtl ? -i : +i)
        await delay(time)
    }
}

async function main() {
    let div = document.querySelector('h1')
    await typeAnimation(div, true, 'Coming soon...', 100)
    await typeAnimation(div, false, 'and here it comes!', 100)
}

main()

<h1></h1>

​

Answer 2

我会用承诺创建两个函数

​

const demo = document.querySelector('#demo')

const initial = "Coming Soon"
const later = "SeaDogs.com.eu.as"

remove(initial).then(() => add(later))

function remove(text) {
  let i = text.length
  return new Promise(r => {
    removeCharacter()

    function removeCharacter() {
      if (i < 0) {
        r()
        return
      }
      const copy = text.slice(0, i)
      demo.textContent = copy

      setTimeout(removeCharacter, 100)
      i -= 1
    }
  })
}

function add(text) {
  let i = 0
  return new Promise(r => {
    removeCharacter()

    function removeCharacter() {
      if (i > text.length) {
        r()
        return
      }
      const copy = text.slice(0, i)
      demo.textContent = copy

      setTimeout(removeCharacter, 100)
      i += 1
    }
  })
}

<p id="demo"></p>

​

Answer 3

退出子句不正确--检查str == str的子字符串是否正确--这是它永远不会的。

由于.slice与负索引的工作方式，您获得了两次

从

• .slice(0, 8) ->开始到第8 character
• .slice(0, -2) ->，从

开始使用2个字符

可以将exit子句从if (text === str) return更改为

if (text === "") return;

或

if (i === 0) return;

取决于何时结束-因为exit子句在输出之前，这将保留最后一个字符，因此：

if (i<0) return;

​

var str = 'Coming Soon';
var remove = false;
var i = str.length;
var isTag;
var text;

(function type() {
  if (!remove) {
    text = str.slice(0, --i);
    //console.log(i, text)
    if (i < 0) return;
  }

  if (!isTag) {
    document.getElementById("demo").innerHTML = text;
  }

  setTimeout(type, 150);

}());

<p id="demo"></p>

​

但是，我希望remove和!remove之间会有一些混淆，因为您还没有-删除(即添加)和-i。因此，在添加时，确实需要检查text==str