Я пытаюсь очень быстро высветить отдельные слова из тела сообщения в div по одному слову за раз.
var postbody = document.getElementById('postbody');
var posttext = $('#postbody').text();
var postwords = posttext.split(" ");
for (var i=0; i < postwords.length; i+=1) {
console.info(i)
setTimeout(function(i)
{
$("#flashreadword").fadeOut("slow", function (i)
{
currentword = postwords[i];
console.info(currentword)
$("#flashreadword").html(currentword);
$("#flashreadword").show();
});
}, 300);
};
Из предоставленной вами небольшой информации я создал песочницу здесь, которая считывает внутренний текст postbody
одним нажатием кнопки, а затем устанавливает внутренний текст flashreadword
каждые 200 мс. Я использовал асинхронность и жду, что вы можете установить тайм-ауты, но у вас может быть условие выхода из синхронизации.
import $ from "jQuery";
$("#submit").click(async () => {
var posttext = $("#postbody").text();
var postwords = posttext.split(" ").filter((x) => /[aA-zZ]|[0-9]/.test(x));
for (var i = 0; i < postwords.length; i++) {
console.info(postwords);
await new Promise((r) => setTimeout(r, 200));
$("#flashreadword").text(postwords[i]);
}
$("#flashreadword").text("ALL WORDS COMPLETED");
});
<div id = "app">
<div id = "postbody">
This is my text
</div>
<div id = "flashreadword"></div>
</div>
Вы не ждете завершения одного тайм-аута, прежде чем настроить следующий.