Javascript задержка изменения изображения внутри для

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);
  });