Как я могу использовать setTimeout (), чтобы буквы появлялись без задержки? - PullRequest
Новая
       17

Как я могу использовать setTimeout (), чтобы буквы появлялись без задержки?

0 голосов
/ 24 апреля 2020

Мне нужно, чтобы каждая из этих букв появлялась одна за другой в каскаде, как в старой видеоигре. У меня есть каждая буква, сохраненная в массиве, и функция writeText может поместить их все в диалоговое окно. Это работает, но я хотел бы, чтобы каждая буква появлялась после очень короткой задержки. Как я могу использовать тайм-аут, чтобы задержать их? 

const phrase1 = ['H', 'i', ',', ' ', 'J', 'o', 'n', 'a', 't', 'h', 'a', 'n'];
function writeText(phrase){
    var dialogue= phrase[0];
    for (i=1; i < phrase.length; i++){
    dialogue= dialogue+ phrase[i];
    document.getElementById("dbox").innerHTML = dialogue; 
};
writeText(phrase1);

Ответы [ 5 ]

2 голосов
/ 24 апреля 2020

Функция writeText() должна вызывать setTimeout(), если есть еще буквы. Тайм-аут должен отобразить букву и вызвать writeText() с новым массивом фраз, используя Array.slice() и удалив первый элемент: 

const phrase1 = ['H', 'i', ',', ' ', 'J', 'o', 'n', 'a', 't', 'h', 'a', 'n'];

const dbx = document.getElementById("dbox");

function writeText(phrase) {
  if (phrase.length === 0) return;

  setTimeout(() => {
    dbox.innerHTML += phrase[0];
    writeText(phrase.slice(1));
  }, 200);
}

writeText(phrase1);
<div id="dbox"></div>
0 голосов
/ 24 апреля 2020

Это немного большое решение, но оно может помочь вам.

Здесь я возвращаю задержанный символ с разрешением обещания и читаю его, используя async/await. 

const phrase1 = ['H', 'i', ',', ' ', 'J', 'o', 'n', 'a', 't', 'h', 'a', 'n'];

const dbox = document.getElementById('dbox');

const getChar = (char) => {
    let timeout;
    return new Promise((resolve, reject) => {
	if (timeout) clearTimeout(timeout); // Don't forget to clear timeout
	timeout = setTimeout(() => {
	    resolve(char);
	}, 150);
    })
}

const writeText = async (arr) => {
    const {length} = arr;
    for (let i = 0; i < length; i++) {
	let text = await getChar(arr[i]);
	dbox.innerHTML += text;
    }
}

writeText(phrase1);
<div id="dbox"></div>
0 голосов
/ 24 апреля 2020

Вот еще одно решение, я предпочитаю использовать строку вместо массива. Легче и быстрее копировать и писать больше фраз.

Вам необходимо использовать setTimeout для вызова функции каждые X мс, каждый тик будет писать 1 букву 

const phrase1 = 'Hi, Jonathan!';
const delay = 200 //lower means faster

function writeText(phrase, container){
    var div = document.getElementById(container);
    
    function writeTextHelper (phraseHelper, i) {
      if (phraseHelper.length <= i) { return; }
      div.innerHTML = div.innerHTML+''+phraseHelper.charAt(i);
      i++
      setTimeout(_ => { writeTextHelper(phrase, i) }, delay)
    }
    
    setTimeout(_ => { writeTextHelper(phrase, 0) }, delay)
};
writeText(phrase1, 'dbox');
<div id='dbox'></div>
0 голосов
/ 24 апреля 2020

Сделайте ваши функции async и await пустышкой Promise: 

async function writeText(phrase){
    // your code here

    const delayMs = 500; // set this to whatever you like
    await new Promise(resolve => setTimeout(resolve, delayMs));
}
0 голосов
/ 24 апреля 2020

то, что вы пытаетесь закодировать, называется пишущей машинкой, и его легко реализовать, просто проверьте этот код в W3schools https://www.w3schools.com/howto/howto_js_typewriter.asp

...