1

Tengo un script de prueba el cual al presionar un botón este se deshabilita por 3 segundos y luego vuelve a estar activo, pero luego de un determinado numero de clics este desaparece, lo que busco es un script a parte, lo voy a usar específicamente en Greasemonkey, que presione dicho botón con las siguientes condiciones:

  1. Solo cuando el botón esté activo.
  2. Deje de ejecutar el script cuando el botón desaparezca.

Esta es la pagina de prueba:

function timeout() {
  let div = document.getElementById("counter");
  let boton = document.getElementById("hack");
  let count = parseInt(div.innerHTML, 10) - 1;

  if (count != 0) {
    boton.disabled = true;
    div.innerHTML = count;

    setInterval(function() {
      boton.disabled = false;
    }, 3000, "JavaScript");
  } else {
    boton.style.display = "none";
  }
}
<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
  <button onclick="timeout()" id="hack">Hack NASA</button>
  <div id="counter" hidden>5</div>
</body>

</html>

Sin embargo hay cosas que varían:

  1. El numero de veces que el script debe presionar el botón.
  2. El tiempo que tardará la página en mostrar el botón.

Por lo tanto se me ocurre que no se deba temporizar el tiempo en que el script presiona el botón, sino que este detecte cuando ya el botón este habilitado y procesa a presionarlo, después de todo el script solo se va a detener cuando el botón desaparezca.

La verdad se como verificar que el botón exista, sabría verificar si el botón está habilitado, pero no se como implementar un ciclo indeterminado pero tampoco infinito que verifique constantemente si el botón aún existe, y en el momento que desaparezca, se deje de ejecutar, pensé en while pero no me funcionó.

Esto es lo unico que llevo:

var boton = document.getElementById("hack");
if(boton){
    boton.click();
}

Claramente este script se ejecuta una sola vez. De antemano, solo quisiera propuestas en Javascript, no JQuery.

2 respuestas 2

1

Se me ocurre que uses Eventos Personalizados para realizar la tarea. Usar temporizadores para verificar el estado de un elemento es engorroso y poco fiable, además de crear una sobrecarga en la cola de eventos, lanzando cada cierto tiempo una función para verificar el estado del elemento.

La idea es crear un evento, digamos que se llamará isActive y crear una función para escuchar ese evento particular y realizar la acción de click.

Por ejemplo:

const button = document.getElementById('button');
const myCustomEvent = new CustomEvent('isActive');
let times = 3;

const onButtonClicked = function(e) {
  console.log('Boton presionado');
  button.setAttribute('disabled', 'disabled');
  times--;
  setTimeout((e) => {
    console.log('Tiempo finalizado');
    if(times) {
      button.removeAttribute('disabled');
      button.dispatchEvent(myCustomEvent);
      return;
    }
    button.classList.add('d-none');
  }, 3000);
}

const onActive = function(e) {
  // esto es un temporizador para mostrar que el boton está activo
  setTimeout(() => {
    button.click();
  }, 1000);
  
}

button.addEventListener('click', onButtonClicked);
button.addEventListener('isActive', onActive);
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<div class="container-fluid">
  <div class="row justify-content-center pt-3">
    <div class="col-3 text-center">
      <button type="button" id="button" class="btn btn-success">Click Me</button>
    </div>
  </div>
</div>

Simplemente hemos creado un evento personalizado y lo disparamos justo al momento en que el botón vuelve a estar activo.

Nuestro evento se llama isActive, y lo almaceno en una variable de tipo Event con el nombre de myCustomEvent.

Al momento de activar el botón, disparo el evento usando element.dispatchEvent(myCustomEvent).

La función onActive se ejecuta cuando el evento es disparado, realizando la acción de click() sobre el botón.

En mi ejemplo he puesto un setTimeout en dicha función para que veas que el botón está activo justo antes de hacer click.

Hay una variable times que indica la cantidad de veces que se podrá hacer clic sobre el botón antes de que el mismo quede desactivado indefinidamente.

Como puedes observar, la función onActive se ejecutará siempre que el evento isActive sea disparado.

He usado clases de Bootstrap, pero imagino que eso no es problema ya que la lógica es la misma. La clase d-none de Bootstrap es equivalente a display: none; de CSS.

Espero que esto te ayude a solucionar el problema.

1
  • Muchas gracias amigo, una solución muy practica y perfectamente modificable.
    – Jalkhov
    el 27 may. 2020 a las 21:48
1

Puedes usar un intervalo y al no estar disponible el botón, ese intervalo se borre a sí mismo.

var button = document.querySelector('#hack')
var interval = setInterval(function () {
  console.log('interval callback executed');

  if (!button || button.style.display === "none") {
    clearInterval(interval);
    console.log('hasta la vista baby')
  }

  if (!button.disabled) {
    button.click();
    console.log('click executed')
  }
}, 200);

Puedes variar el tiempo en que este se ejecuta (en el ejemplo son 200 ms) pero en realidad este tiempo puede no ser significativo para el ejemplo que mencionas.

Saludos.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.