Javascript funções entrelaçadas em js

Div · 12 de agosto de 2021

Estou com o seguinte problema quando eu dou dois cliques no meu botão ele entrelaça o array fatiado anterior eu tentei matar o processo anterior com .remove() e também colocar null ao contador mais removia o elemento inteiro ou dava um erro o certo era apenas apagar o contador anterior para começar um novo

 <body style="background-color: #444; color: #fff;">
  
  <script>

      var vidas = 0

      function lol() {

        

         if(vidas >= 5) {
          window.location.href = 'index.html'
        } else {

          vidas++

          balao = document.getElementById('balao')


          var textos = new Array()
          textos[1] = ' texto um'
          textos[2] = ' texto dois'
          textos[3] = ' texto três'
          textos[4] = ' texto quatro'
          textos[5] = ' texto cinco'

          negativo = document.getElementById('negativo')
          negativo_2 = document.getElementById('negativo_2')
          negativo.innerHTML = '- ' + vidas

          if(vidas === 5){
            negativo.remove()
            negativo_2.style.fontSize = '20px'
            negativo_2.innerHTML = '<span align="center"><h1><b>GAME</b><h2><b>OVER</b></h2><span>'

          }

          var corazon = document.getElementById('v' + vidas)
          corazon.remove()

          var flower_ = document.getElementById('flower')


          var contador = textos[vidas].split("");
          var timer;
          

          function loop () {
            if (contador.length > 0) {
              balao.innerHTML += contador.shift();
            } else {
              clearTimeout(timer);
                }
            loopTimer = setTimeout(loop,100);

          }

          loop();

        }
        
      }
  </script>


<span>* </span><span id="balao">texto zero </span>


      <div class="objects">

          <div class="vidas">
            <span id="negativo"></span><span id="negativo_2"></span><br>
            <img id="v1" src="data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAQAAACROWYpAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QA/4ePzL8AAAAHdElNRQflCAgOOiqLFXkaAAAA/0lEQVQ4y+2UzU4CMRSFv9YiiCGBhNGtPgmJYeuSp8DE5/CxXPIKLMQ30EwyUaaYy6J3kvmBCjNbThftac9p7u3PRRAEGUvAs/LDba6qJHALgGNAwB0Wq7NlXOG4pq9sFBRGwPLXEA/YlpjDNxQ9do6EEU3ck/Kt44TxAcWUXyPCMRjtjyosHRAzm//MLrL2ypBbhpHdIzl3CvtivpgBcKwB6PF4husLT05u9HU+sDnDPAl/vQg775Kzb2MuvmTKCwALZhH1OysyMn6U14rrm8SwrKrrV5W1ybmV2dQKSZ8bAD6YlGY3PJHjSSvVvFHDtrpcPX3P5ylhFzjp3juZ95CIf40YVJ6uAAAAAElFTkSuQmCC" width="25px" />

            <img id="v2" src="data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAQAAACROWYpAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QA/4ePzL8AAAAHdElNRQflCAgOOiqLFXkaAAAA/0lEQVQ4y+2UzU4CMRSFv9YiiCGBhNGtPgmJYeuSp8DE5/CxXPIKLMQ30EwyUaaYy6J3kvmBCjNbThftac9p7u3PRRAEGUvAs/LDba6qJHALgGNAwB0Wq7NlXOG4pq9sFBRGwPLXEA/YlpjDNxQ9do6EEU3ck/Kt44TxAcWUXyPCMRjtjyosHRAzm//MLrL2ypBbhpHdIzl3CvtivpgBcKwB6PF4husLT05u9HU+sDnDPAl/vQg775Kzb2MuvmTKCwALZhH1OysyMn6U14rrm8SwrKrrV5W1ybmV2dQKSZ8bAD6YlGY3PJHjSSvVvFHDtrpcPX3P5ylhFzjp3juZ95CIf40YVJ6uAAAAAElFTkSuQmCC" width="25px" />

            <img id="v3" src="data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAQAAACROWYpAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QA/4ePzL8AAAAHdElNRQflCAgOOiqLFXkaAAAA/0lEQVQ4y+2UzU4CMRSFv9YiiCGBhNGtPgmJYeuSp8DE5/CxXPIKLMQ30EwyUaaYy6J3kvmBCjNbThftac9p7u3PRRAEGUvAs/LDba6qJHALgGNAwB0Wq7NlXOG4pq9sFBRGwPLXEA/YlpjDNxQ9do6EEU3ck/Kt44TxAcWUXyPCMRjtjyosHRAzm//MLrL2ypBbhpHdIzl3CvtivpgBcKwB6PF4husLT05u9HU+sDnDPAl/vQg775Kzb2MuvmTKCwALZhH1OysyMn6U14rrm8SwrKrrV5W1ybmV2dQKSZ8bAD6YlGY3PJHjSSvVvFHDtrpcPX3P5ylhFzjp3juZ95CIf40YVJ6uAAAAAElFTkSuQmCC" width="25px" />

            <img id="v4" src="data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAQAAACROWYpAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QA/4ePzL8AAAAHdElNRQflCAgOOiqLFXkaAAAA/0lEQVQ4y+2UzU4CMRSFv9YiiCGBhNGtPgmJYeuSp8DE5/CxXPIKLMQ30EwyUaaYy6J3kvmBCjNbThftac9p7u3PRRAEGUvAs/LDba6qJHALgGNAwB0Wq7NlXOG4pq9sFBRGwPLXEA/YlpjDNxQ9do6EEU3ck/Kt44TxAcWUXyPCMRjtjyosHRAzm//MLrL2ypBbhpHdIzl3CvtivpgBcKwB6PF4husLT05u9HU+sDnDPAl/vQg775Kzb2MuvmTKCwALZhH1OysyMn6U14rrm8SwrKrrV5W1ybmV2dQKSZ8bAD6YlGY3PJHjSSvVvFHDtrpcPX3P5ylhFzjp3juZ95CIf40YVJ6uAAAAAElFTkSuQmCC" width="25px" />

            <img id="v5" src="data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAQAAACROWYpAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QA/4ePzL8AAAAHdElNRQflCAgOOiqLFXkaAAAA/0lEQVQ4y+2UzU4CMRSFv9YiiCGBhNGtPgmJYeuSp8DE5/CxXPIKLMQ30EwyUaaYy6J3kvmBCjNbThftac9p7u3PRRAEGUvAs/LDba6qJHALgGNAwB0Wq7NlXOG4pq9sFBRGwPLXEA/YlpjDNxQ9do6EEU3ck/Kt44TxAcWUXyPCMRjtjyosHRAzm//MLrL2ypBbhpHdIzl3CvtivpgBcKwB6PF4husLT05u9HU+sDnDPAl/vQg775Kzb2MuvmTKCwALZhH1OysyMn6U14rrm8SwrKrrV5W1ybmV2dQKSZ8bAD6YlGY3PJHjSSvVvFHDtrpcPX3P5ylhFzjp3juZ95CIf40YVJ6uAAAAAElFTkSuQmCC" width="25px" />
          </div>

<div class="mt_2">
    <a style="cursor: pointer;" class="btn-go-home" onclick="lol()" data-tilt>Continue</a></div>
    
</body>

obs: a função se entrelaça se você der dois cliques pertos um do outro

Div · 12 de agosto de 2021

Bom foi na verdade bem simples de fazer mais deu um pouco de trabalho... ou até bastante

eu ajustei para se inner estiver processando e não for iqual a 0 não processar o script de novo no segundo clique

<script>
  var vidas = 0;
var processar = true;
function lol() {
    if (!processar)
        return;

    processar = false;
    if (vidas >= 5) {
        window.location.href = 'index.html';
    } else {
        vidas++;
        balao = document.getElementById('balao');

        var textos = new Array();
        textos[1] = ' texto um';
        textos[2] = ' texto dois';
        textos[3] = ' texto três';
        textos[4] = ' texto quatro';
        textos[5] = ' texto cinco';

        negativo = document.getElementById('negativo');
        negativo_2 = document.getElementById('negativo_2');
        negativo.innerHTML = '- ' + vidas;

        if (vidas === 5) {
            negativo.remove();
            negativo_2.style.fontSize = '20px';
            negativo_2.innerHTML = '<span align="center"><h1><b>GAME</b><h2><b>OVER</b></h2><span>';
        }

        var corazon = document.getElementById('v' + vidas);
        corazon.remove();

        var flower_ = document.getElementById('flower');

        var contador = textos[vidas].split("");
        function loop() {
            if (contador.length > 0) {
                balao.innerHTML += contador.shift();
                setTimeout(loop, 100);
            } else {
                processar = true;
            }
        }
        
        balao.innerHTML = ''

        loop();
    }
}
</script>

<body style="background-color: #444; color: #fff;">
<span>* </span><span id="balao">texto zero </span>
      <div class="objects">
          <div class="vidas">
            <span id="negativo"></span><span id="negativo_2"></span><br>
            <img id="v1" src="data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAQAAACROWYpAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QA/4ePzL8AAAAHdElNRQflCAgOOiqLFXkaAAAA/0lEQVQ4y+2UzU4CMRSFv9YiiCGBhNGtPgmJYeuSp8DE5/CxXPIKLMQ30EwyUaaYy6J3kvmBCjNbThftac9p7u3PRRAEGUvAs/LDba6qJHALgGNAwB0Wq7NlXOG4pq9sFBRGwPLXEA/YlpjDNxQ9do6EEU3ck/Kt44TxAcWUXyPCMRjtjyosHRAzm//MLrL2ypBbhpHdIzl3CvtivpgBcKwB6PF4husLT05u9HU+sDnDPAl/vQg775Kzb2MuvmTKCwALZhH1OysyMn6U14rrm8SwrKrrV5W1ybmV2dQKSZ8bAD6YlGY3PJHjSSvVvFHDtrpcPX3P5ylhFzjp3juZ95CIf40YVJ6uAAAAAElFTkSuQmCC" width="25px" />

            <img id="v2" src="data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAQAAACROWYpAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QA/4ePzL8AAAAHdElNRQflCAgOOiqLFXkaAAAA/0lEQVQ4y+2UzU4CMRSFv9YiiCGBhNGtPgmJYeuSp8DE5/CxXPIKLMQ30EwyUaaYy6J3kvmBCjNbThftac9p7u3PRRAEGUvAs/LDba6qJHALgGNAwB0Wq7NlXOG4pq9sFBRGwPLXEA/YlpjDNxQ9do6EEU3ck/Kt44TxAcWUXyPCMRjtjyosHRAzm//MLrL2ypBbhpHdIzl3CvtivpgBcKwB6PF4husLT05u9HU+sDnDPAl/vQg775Kzb2MuvmTKCwALZhH1OysyMn6U14rrm8SwrKrrV5W1ybmV2dQKSZ8bAD6YlGY3PJHjSSvVvFHDtrpcPX3P5ylhFzjp3juZ95CIf40YVJ6uAAAAAElFTkSuQmCC" width="25px" />

            <img id="v3" src="data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAQAAACROWYpAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QA/4ePzL8AAAAHdElNRQflCAgOOiqLFXkaAAAA/0lEQVQ4y+2UzU4CMRSFv9YiiCGBhNGtPgmJYeuSp8DE5/CxXPIKLMQ30EwyUaaYy6J3kvmBCjNbThftac9p7u3PRRAEGUvAs/LDba6qJHALgGNAwB0Wq7NlXOG4pq9sFBRGwPLXEA/YlpjDNxQ9do6EEU3ck/Kt44TxAcWUXyPCMRjtjyosHRAzm//MLrL2ypBbhpHdIzl3CvtivpgBcKwB6PF4husLT05u9HU+sDnDPAl/vQg775Kzb2MuvmTKCwALZhH1OysyMn6U14rrm8SwrKrrV5W1ybmV2dQKSZ8bAD6YlGY3PJHjSSvVvFHDtrpcPX3P5ylhFzjp3juZ95CIf40YVJ6uAAAAAElFTkSuQmCC" width="25px" />

            <img id="v4" src="data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAQAAACROWYpAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QA/4ePzL8AAAAHdElNRQflCAgOOiqLFXkaAAAA/0lEQVQ4y+2UzU4CMRSFv9YiiCGBhNGtPgmJYeuSp8DE5/CxXPIKLMQ30EwyUaaYy6J3kvmBCjNbThftac9p7u3PRRAEGUvAs/LDba6qJHALgGNAwB0Wq7NlXOG4pq9sFBRGwPLXEA/YlpjDNxQ9do6EEU3ck/Kt44TxAcWUXyPCMRjtjyosHRAzm//MLrL2ypBbhpHdIzl3CvtivpgBcKwB6PF4husLT05u9HU+sDnDPAl/vQg775Kzb2MuvmTKCwALZhH1OysyMn6U14rrm8SwrKrrV5W1ybmV2dQKSZ8bAD6YlGY3PJHjSSvVvFHDtrpcPX3P5ylhFzjp3juZ95CIf40YVJ6uAAAAAElFTkSuQmCC" width="25px" />

            <img id="v5" src="data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAQAAACROWYpAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QA/4ePzL8AAAAHdElNRQflCAgOOiqLFXkaAAAA/0lEQVQ4y+2UzU4CMRSFv9YiiCGBhNGtPgmJYeuSp8DE5/CxXPIKLMQ30EwyUaaYy6J3kvmBCjNbThftac9p7u3PRRAEGUvAs/LDba6qJHALgGNAwB0Wq7NlXOG4pq9sFBRGwPLXEA/YlpjDNxQ9do6EEU3ck/Kt44TxAcWUXyPCMRjtjyosHRAzm//MLrL2ypBbhpHdIzl3CvtivpgBcKwB6PF4husLT05u9HU+sDnDPAl/vQg775Kzb2MuvmTKCwALZhH1OysyMn6U14rrm8SwrKrrV5W1ybmV2dQKSZ8bAD6YlGY3PJHjSSvVvFHDtrpcPX3P5ylhFzjp3juZ95CIf40YVJ6uAAAAAElFTkSuQmCC" width="25px" />
          </div>

<div class="mt_2">
    <a style="cursor: pointer;" class="btn-go-home" onclick="lol()" data-tilt>Continue</a></div>
</body>