Question

我用JavaScript创建了一个类型编写器效果，但是我想当单词更改在函数增加索引之前添加延迟

const texts = ["Front Developer", "Designer", "Human"];
let count = 0;
let index = 0;
let currentText = '';
let letter = '';

(function type(){
    if(count === texts.length){
        count = 0;
    }
    currentText =  texts[count];
    letter = currentText.slice(0, index++);

    document.querySelector('.typing').textContent = letter;
    if(letter.length === currentText.length){
        count++;
        index = 0;
    }
    setTimeout(type, 400);
}());

<span>I'm <span class="typing"></span></span>

Answer 1

尝试return和其他timeout

const texts = ["Front Developer", "Designer", "Human"];
let count = 0;
let index = 0;
let currentText = '';
let letter = '';

(function type() {
  if (count === texts.length) {
    count = 0;
  }
  currentText = texts[count];
  letter = currentText.slice(0, index++);

  document.querySelector('.typing').textContent = letter;
  if (letter.length === currentText.length) {
    count++;
    index = 0;
    setTimeout(type, 2000);
    return;
  }
  setTimeout(type, 200);
}());

<span>I'm <span class="typing"></span></span>

Answer 2

这里是async / await

的解决方案

const texts = ["Front Developer", "Designer", "Human"];
let count = 0;
let index = 0;
let currentText = '';
let letter = '';

(async function type(){
    if(count === texts.length){
        count = 0;
    }
    currentText =  texts[count];
    letter = currentText.slice(0, index++);

    document.querySelector('.typing').textContent = letter;
    if(letter.length === currentText.length){
        count++;
        index = 0;
        await sleep(4000);
    }
    await sleep(30);
    type();
}());

function sleep(time) { return new Promise(res => setTimeout(res, time))}

<span>I'm <span class="typing"></span></span>

在index ++时增加延迟（增加）

2 个答案: