Javascript延迟了for内部的图像更改

Question

我正在使用Electon js制作一个应用程序，该应用程序需要验证确定论有限自动机，然后用图表和状态显示过程。

为了在图表中显示从一种状态到另一种状态的变化，我有5张图像，每种状态都突出显示一张，并且正在使用此功能：

function animarDiagrama(){
document.getElementById("blanco").style.display = "none";
document.getElementById("q1").style.display = "block";
var cadenaLength = cadena.length;
var estado = "q1";
for (var i = 0; i < cadenaLength; i++){
var j = i + 1;
if (estado == 'q1'){
if(cadena.substring(i,j) == 'a'){
estado = 'q2';
document.getElementById("blanco").style.display = "none";
document.getElementById("q1").style.display = "none";
document.getElementById("q2").style.display = "block";
document.getElementById("q3").style.display = "none";
document.getElementById("q4").style.display = "none";
}else if (cadena.substring(i,j) == 'b'){
estado = 'q3';
document.getElementById("blanco").style.display = "none";
document.getElementById("q1").style.display = "none";
document.getElementById("q2").style.display = "none";
document.getElementById("q3").style.display = "block";
document.getElementById("q4").style.display = "none";
}
}else if (estado == 'q2'){
if(cadena.substring(i,j) == 'a'){
estado = 'q4';
document.getElementById("blanco").style.display = "none";
document.getElementById("q1").style.display = "none";
document.getElementById("q2").style.display = "none";
document.getElementById("q3").style.display = "none";
document.getElementById("q4").style.display = "block";
}else if (cadena.substring(i,j) == 'b'){
estado = 'q3';
document.getElementById("blanco").style.display = "none";
document.getElementById("q1").style.display = "none";
document.getElementById("q2").style.display = "none";
document.getElementById("q3").style.display = "block";
document.getElementById("q4").style.display = "none";
}
}else if (estado == 'q3'){
if(cadena.substring(i,j) == 'a'){
estado = 'q2';
document.getElementById("blanco").style.display = "none";
document.getElementById("q1").style.display = "none";
document.getElementById("q2").style.display = "block";
document.getElementById("q3").style.display = "none";
document.getElementById("q4").style.display = "none";
}else if (cadena.substring(i,j) == 'b'){
estado = 'q4';
document.getElementById("blanco").style.display = "none";
document.getElementById("q1").style.display = "none";
document.getElementById("q2").style.display = "none";
document.getElementById("q3").style.display = "none";
document.getElementById("q4").style.display = "block";
}
}else if (estado == 'q4'){
if(cadena.substring(i,j) == 'a'){
estado = 'q4';
document.getElementById("blanco").style.display = "none";
document.getElementById("q1").style.display = "none";
document.getElementById("q2").style.display = "none";
document.getElementById("q3").style.display = "none";
document.getElementById("q4").style.display = "block";
}else if (cadena.substring(i,j) == 'b'){
estado = 'q4';
document.getElementById("blanco").style.display = "none";
document.getElementById("q1").style.display = "none";
document.getElementById("q2").style.display = "none";
document.getElementById("q3").style.display = "none";
document.getElementById("q4").style.display = "block";
}
}
}
}

这个函数是通过一个按钮调用的，但问题是，当调用它时，我只能看到它立即生成的最后状态。

有没有办法让图像慢慢变化？

这是HTML:

<p>La cadena: </p>  <ul></ul>   <p> es válida. </p>
<p>Diagrama:</p>
<button type="submit" onclick="animarDiagrama();">Ver movimiento en diagrama</button>
<!-- Contenedor del diagrama -->
<img src="images/blanco.png" alt="Diagrama en Blanco" id="blanco" style="display: block;">
<img src="images/q1.png" alt="Estado Q1" id="q1" style="display: none;">
<img src="images/q2.png" alt="Estado Q2" id="q2" style="display: none;">
<img src="images/q3.png" alt="Estado Q3" id="q3" style="display: none;">
<img src="images/q4.png" alt="Estado Q4" id="q4" style="display: none;">

编辑：这是验证用户在我的主窗口中输入的数据的功能

function validarCadena(){
//Obtener cadena
cadenaValue = document.getElementById("cadena").value;
//Guardar cadena como String
cadenaString = String(cadenaValue);
//Obtener longitud de la cadena para ciclo
cadenaLength = cadenaString.length;
valid = false; //Var para validez de la cadena
//If cadena vacia
if(cadenaLength == 0){
valid = true;
}else{
//If cadena no vacia
for (var i = 0; i < cadenaLength; i++){
//Variables para metodo substring(j,k) <- obtiene un
//substring desde j (incluido) hasta k (no incluido)
var j = i+1;
var k = j+1;
//if cadena de un solo caracter
if (cadenaLength == 1){
//a o b son validas, otra cosa no
if (cadenaString.substring(0,1) == 'a' || 
cadenaString.substring(0,1) == 'b'){
valid = true;
}else {
valid = false;
}
}else {
//cadenas de mas de un caracter
if(cadenaString.substring(i,j) == 'a'){
if(cadenaString.substring(j,k) == 'b' || 
cadenaString.substring(j,k) == ''){
valid = true;
}else {
valid = false;
break;
}
}else if (cadenaString.substring(i,j) == 'b'){
if(cadenaString.substring(j,k) == 'a' ||
cadenaString.substring(j,k) == ''){
valid = true;
} else {
valid = false;
break;
}
}else {
valid = false;
}
}
}
}
//Enviar cadena a main.js
const item = document.querySelector('#cadena').value;
ipcRenderer.send('item:add', item, valid);
}

这是如何处理的：

ipcMain.on('item:add', function(e, item, item2){
cadena = item;
valid = item2;
if(valid == true){
createValidWindow();
}else if (valid == false){
createInvalidWindow();
}
enviarCadena(cadena);

})；

Answer 1

所以我认为requestAnimationFrame是您的解决方案
请参阅：https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame

您也可以使用代码看起来像这样(未测试(我只是让它更可读

<p>La cadena: </p>  <ul></ul>   <p> es válida. </p>
<p>Diagrama:</p>
<button id="Bt-Diag-Anim">Ver movimiento en diagrama</button>
<!-- Contenedor del diagrama -->
<img src="images/blanco.png" alt="Diagrama en Blanco" id="blanco" style="display: block;">
<img src="images/q1.png" alt="Estado Q1" id="q1" style="display: none;">
<img src="images/q2.png" alt="Estado Q2" id="q2" style="display: none;">
<img src="images/q3.png" alt="Estado Q3" id="q3" style="display: none;">
<img src="images/q4.png" alt="Estado Q4" id="q4" style="display: none;">

const status= 
{ q1: { a: 'q2', b: 'q3'} 
, q2: { a: 'q4', b: 'q3'} 
, q3: { a: 'q2', b: 'q4'} 
, q4: { a: 'q4', b: 'q4'}
}
, E_Img= 
{ Bl : document.getElementById('blanco')
, q1 : document.getElementById('q1')
, q2 : document.getElementById('q2')
, q3 : document.getElementById('q3')
, q4 : document.getElementById('q4')
}
document.getElementById('Bt-Diag-Anim').onclick=_=>
{
E_Img.Bl.style.display = 'none'
E_Img.q1.style.display = 'block'
let estado = 'q1'
, p      = 0
, pMax   = cadena.length
function anim() 
{
estado = status[estado][cadena.charAt(p)]
for (zImg in E_Img )
{
E_Img[zImg].style.display = (zImg === estado) ? 'block' : 'none'
}
if(++p<pMax)
{ requestAnimationFrame(anim) }
}
requestAnimationFrame(anim) 
}

(WhiteSmith风格(

奖金：

function validarCadena()
{
let cadenaValue  = document.getElementById("cadena").value  // Obtener cadena
, cadenaString = String(cadenaValue)                     // Guardar cadena como String
, valid        = true                                   // Var para validez de la cadena
for(let p=0, pMax=cadenaString.length; p<pMax;p++)
{
if (!/^[a-b]/.test(cadenaString.charAt(p))
|| cadenaString.charAt(p)===cadenaString.charAt(p+1) )
{
valid = false
break
}
}
//Enviar cadena a main.js
ipcRenderer.send('item:add', cadenaValue, valid);
}

ipcMain.on('item:add', function(e, item, valid)
{
cadena = item;
if(valid)
{
createValidWindow();
}
else
{
createInvalidWindow();
}
enviarCadena(cadena);
});