I'm trying to flash the individual words from within a post body, into a div one word at a time really really quickly.
var postbody = document.getElementById('postbody');
var posttext = $('#postbody').text();
var postwords = posttext.split(" ");
for (var i=0; i < postwords.length; i+=1) {
console.log(i)
setTimeout(function(i)
{
$("#flashreadword").fadeOut("slow", function (i)
{
currentword = postwords[i];
console.log(currentword)
$("#flashreadword").html(currentword);
$("#flashreadword").show();
});
}, 300);
};
From the little information you've provided, I've created a sandbox here, this reads the inner text of a postbody on a click of a button then sets innertext of flashreadword every 200ms. I've used async and await you can ofc set timeouts but you may have a condition of running out of sync.
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.log(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>