当遇到句点或逗号时，如何减慢从数组中键入随机字符串的函数？

Question

我有这样的打字机功能：

var myArray = [
  'sentence. another sentence.', 
  'this sentence. yet another sentence.', 
];
var rand = myArray[Math.floor(Math.random() * myArray.length)];
var i = 0;
var speed = 55;

function typeWriter() {
  if (i < rand.length) {
    document.getElementById("question").innerHTML += rand.charAt(i);
    i++;
    setTimeout(typeWriter, speed);
  }
}

typeWriter();

<div id="question"></div>

如果当前输入的字符是句号或逗号，我如何才能将打字机功能速度更改为 80 毫秒，然后在输入普通字母时 return 变为 55 毫秒？这将帮助我用打字功能模仿说话的节奏并提高可读性。感谢您的帮助。

Answer 1

只需将 speed 或第二个参数更改为 setTimeout。

当你这样做的时候，你也可以通过以下方式使代码更清晰：

1) 使用 await 而不是 setTimeout,

2) 命名您的延迟（例如 DELAYS），而不是一堆内联常量

3) 使用适当的 for 循环而不是用 if 语句重新发明 for 循环

4) 使用适当的局部变量和函数参数而不是全局变量。

5) 使用Element.textContent代替innerHTML

6) 除非必要，否则在 JS 中使用单引号。

let el = document.querySelector('div');

let wait = delay => new Promise(r => setTimeout(r, delay));

let typeWriter = async sentence => {
  const DELAYS = {'.': 500, ',': 200, default: 55};

  for (let c of sentence) {
    el.textContent += c;
    await wait(DELAYS[c] || DELAYS.default);
  }
};

typeWriter('sentence. a comma, another sentence. this sentence. yet another sentence.');

<div></div>

Answer 2

只需检查typeWriter中的当前字符，并相应地设置下一个字符的超时时间。

要实现这一点，可以使用 conditional (ternary) operator (? :):

var myArray = ['sentence. another sentence.', 
              'this sentence. yet another sentence.', 
           ];
var rand = myArray[Math.floor(Math.random() * myArray.length)];
var i = 0;
function typeWriter() {
  if (i < rand.length) {
    document.getElementById("question").innerHTML += rand.charAt(i);
    setTimeout(typeWriter, ['.', ','].includes(rand.charAt(i)) ? 80 : 55);
    i++
  }
}

Answer 3

您已经有一个名为 speed 的变量，那么当当前字符是逗号或句点时，为什么不更改它的值呢？（别忘了稍后再改回来！）。

var myArray = ['sentence. another sentence.', 
              'this sentence. yet another sentence.', 
           ];
var rand = myArray[Math.floor(Math.random() * myArray.length)];
var i = 0;
var speed = 55;
  function typeWriter() {
    if (i < rand.length) {
      document.getElementById("question").innerHTML += rand.charAt(i);
 
    if(rand.charAt(i) == '.' || rand.charAt(i) == ',') {
      speed = 1000;
    }
    else {
      speed = 85;
    }
    i++;
    setTimeout(typeWriter, speed);
  }
}

typeWriter();

<p id="question"></p>

Answer 4

我就是这样做的（使其更加模块化，也是 ES6 风格）

const typeWriter = (str, writeTo, charDelays) => {
  if (!str) return; // Empty
  const nextChar = str.charAt(0);
  writeTo.textContent += nextChar;
  setTimeout(
    () => typeWriter(str.slice(1), writeTo, charDelays), // typeWriter rest of the string
    charDelays[nextChar] || charDelays.DEFAULT || 55 // Custom delay per character
  );
}

那么你可以这样做：

typeWriter('my, very awesome, string!?', document.getElementById('question'), {
  '!': 80,
  ',': 80
});

当遇到句点或逗号时，如何减慢从数组中键入随机字符串的函数？

How to slow a function that types a random string from an array when it comes across a period or comma?

javascript

settimeout