Stop SetTimeOut if the item is no longer clicked before the time out acts

Question

Stop SetTimeOut if the item is no longer clicked before the time out acts

Navigation

#1 by (1 votes)
#2 by (0 votes)

1

I'm doing a virtual keyboard and I want to make that when I hold down a vowel for at least 500ms, I'll open an article that shows the different types of accents. However, I want your behavior to be realistic. If, for example, I stop pressing the key before the 500ms are met, the setTimeOut will be cleaned (with a clearTimeOut). Does anyone know how to execute such an action? Thanks!

javascript jquery html

asked by Criss 11.07.2016 в 01:17

source

2 answers

0

You have a great example in link

var timeoutID;

function delayedAlert() {
  timeoutID = window.setTimeout(slowAlert, 2000);
}

function slowAlert() {
  alert("That was really slow!");
}

function clearAlert() {
  window.clearTimeout(timeoutID);
}

A bit more of Search engine does not cost that much.

answered by 11.07.2016 в 10:42

How to put a link in jquery table that opens a pdf using generic handler? electron - access the webcam

score 1 · Accepted Answer

You could do something like this:

Define a variable where you will save the setTimeout driver.
Create a function that is responsible for displaying the corresponding accents.
If an accented key is pressed.
- Do a setTimeout and call the function in point 2 and assign it to the controller in point 1.
If an accented key stops being pressed.
- Make a clearTimeout of the driver.

For example, here I leave a demo that when you press the key of the letter A for 500ms it shows the possible accents, but if you only press it once, it does not appear (to close the accents box, you only have to click on one of them):

// controlador del setTimeout
var controlador = null;

// funciones para mostrar/esconder la caja de los acentos
function muestraAcentos() {
  $("#acentos").css("visibility", "visible");
}

function escondeAcentos() {
  $("#acentos").css("visibility", "hidden");
}

$(document).ready(function() {

  $("#texto")
     // cuando se pulsa una tecla en el input
     .on("keydown", function(e) {
       // si es la letra 'a'
       if (e.keyCode == 65) {
         // mostrar los acentos
         controlador = setTimeout(muestraAcentos, 500);
       }
     // cuando se deja de pulsar una tecla en el input
     }).on("keyup", function(e) {
       // si es la letra 'a'
       if (e.keyCode == 65) {
         // parar la muestra de los acentos
         clearTimeout(controlador);
       }
     });

  // cerrar la caja de los acentos si se pulsa en uno
  $("#acentos span").on("click", escondeAcentos);

});

#acentos {
  display:inline-block;
  border:1px solid #ccc;
  padding:5px;
  visibility:hidden;
  margin-bottom:2px;
}

#acentos span {
  margin:5px;
}

#texto {
  display:block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div id="acentos">
  <span>A</span>
  <span>Á</span>
  <span>À</span>
  <span>Â</span>
  <span>Ä</span>
</div>
<input type="text" id="texto" />

What you should do then is to define which keys you want to show the accents box and pass them as a parameter to the function that shows it (that way the content will be updated before being displayed).

Edit : if instead of having a physical keyboard, what you have is a keyboard that you have created yourself, the idea is the same, only instead of using the onkeydown events and onkeyup you should use onmousedown and onmouseup respectively.

// controlador del setTimeout
var controlador = null;

// funciones para mostrar/esconder la caja de los acentos
function muestraAcentos() {
  $("#acentos").css("visibility", "visible");
}

function escondeAcentos() {
  $("#acentos").css("visibility", "hidden");
}

$(document).ready(function() {

  $(".boton")
     // cuando se pulsa una tecla en el input
     .on("mousedown", function(e) {
       // mostrar los acentos
       controlador = setTimeout(muestraAcentos, 500);
     // cuando se deja de pulsar una tecla en el input
     }).on("mouseup", function(e) {
       // parar la muestra de los acentos
       clearTimeout(controlador);
     });

  // cerrar la caja de los acentos si se pulsa en uno
  $("#acentos span").on("click", escondeAcentos);

});

#acentos {
  display:inline-block;
  border:1px solid #ccc;
  padding:5px;
  visibility:hidden;
  margin-bottom:2px;
}

#acentos span {
  margin:5px;
}

#texto {
  display:block;
}

.boton {
  display:inline-block;
  width:40px;
  height:40px;
  text-align:center;
  line-height:40px;
  background:#ccc;
  color:black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div id="acentos">
  <span>A</span>
  <span>Á</span>
  <span>À</span>
  <span>Â</span>
  <span>Ä</span>
</div>
<input type="text" id="texto" />
<div class="boton">A</div>

In this case, what it would take is to have some kind of logic so that you do not write the letter if the accents box is shown. But otherwise it is quite similar to the previous method. You could read the letter contained in the button that triggers the event and then display the corresponding accented letters.