setTimeout and clearTimeout giving error

Asked

Viewed 107 times

2

I’m having problems with this Script, initially the purpose of it is just to show the controls while the mouse moves or clicks on the div, and when it stops moving it hides the controls after a while, it works normally, but after a few more uses it starts bugging and do not know how to solve, I am using it to hide the controls of a player, below I made a small example of how I am using, if anyone can help me, would be grateful!

function inicializacao() {
  player = document.getElementById("player");
  controles = player.querySelector(".controles");
  player.addEventListener("mousemove", controle, false);
  player.addEventListener("mousedown", controle, false);
  player.addEventListener("keydown", controle, false);
}
window.onload = inicializacao;

function controle(event) {
  var tempoContado = setTimeout(Off, 3000);
  On();

  function On() {
    controles.style.bottom = "0px";
    clearTimeout(tempoContado);
    tempoContado = setTimeout(Off, 3000);
  }

  function Off() {
    controles.style.bottom = "-50px";
  }
}
#player,
#player * {
  padding: 0px;
  margin: 0px;
}

#player {
  background: yellow;
  position: relative!important;
  height: 50px;
  width: 400px;
}

.controles {
  background: red;
  position: absolute;
  height: 50px;
  width: 100%;
  bottom: 0;
  left: 0;
}
<div id="player">
  <div class="controles"></div>
</div>

javascript javascript-events

  • "but after a few more uses it starts bugging" - how specifically ? I tried to reproduce the problem but unsuccessfully

  • Like, when the mouse starts to move at the beginning it works normally, so I leave the mouse standing over it until it hides the control, and then when it moves the mouse again the control goes back and forth without stopping

  • When you leave the mouse on it, it disappears after a while and after it appears again, it barely moves again disappears again because the mouse is already over that area. Wasn’t that what was supposed to happen ? What working did you intend to get ?

  • Don’t use jQuery? It’s much better for these kinds of things.

  • I’m trying to avoid using jquery, I’m trying to use this to hide the controls of a video player when not the mouse activity in that area and show again when it moves again

  • Charging 84Kb to make your life easier I think it doesn’t come out expensive. But if you want to use pure, quiet JS.

  • This script I tried to do I used a base made in jquey kkk, only thing I changed was the $("#player"). Mousemove(onEvent); and put player.addeventlistener("Mousemove", control, false);

Show 2 more comments

1 answer

0


The way you’re doing, the setTimeout is running several times when one of the events you created occurs, causing one to run into the other.

The best way is to pack everything in the function of window.onload and set timer out of function controle(). Behold:

window.onload = function(){

   function inicializacao() {
      player = document.getElementById("player");
      controles = player.querySelector(".controles");
      player.addEventListener("mousemove", controle, false);
      player.addEventListener("mousedown", controle, false);
      player.addEventListener("keydown", controle, false);
   }

   inicializacao();

   var tempoContado;
   function controle(event) {
      On();

      function On() {
         controles.style.bottom = "0px";
         clearTimeout(tempoContado);
         tempoContado = setTimeout(Off, 3000);
      }

      function Off() {
         controles.style.bottom = "-50px";
      }
   }
}
#player,
#player * {
  padding: 0px;
  margin: 0px;
}

#player {
  background: yellow;
  position: relative !important;
  height: 50px;
  width: 400px;
  overflow: hidden;
}

.controles {
  background: red;
  position: absolute;
  height: 50px;
  width: 100%;
  bottom: 0;
  left: 0;
}
<div id="player">
   player
  <div class="controles">controles</div>
</div>

I added a overflow: hidden; in the #player so that the div .controle disappear.

  • Got it, thanks, that’s what I wanted

Browser other questions tagged javascript javascript-events

You are not signed in. Login or sign up in order to post.