0

Este es mi codigo que hace una llamada Ajax:

    $(".card").hover(function (event) {
    console.log(event)
    if (Math.round(event.timeStamp) >= 4000) {
      let team_id = parseInt($(this).find("span:first-child").html());
      var carta = this;
      $.ajax({
        method: "POST",
        url: "/team/" + team_id,
        dataType: "JSON",
        timeout: 1000,
        error: function (error) {
          console.log(error);
        },
        success: function (res) {
          $(carta).append(plantilla_teams(res.id, res.plays_lose, res.plays_win))
        }

      })
    }


  }, function () {
    if ($(this).has("div.card-detalle")) {
      $(this).find("div.card-detalle").remove();
    }
  })
}

una ves activado el evento en este caso es "mouseEnter", si pasa X segundos en el elemento recién ejecute las instrucciones:

1 respuesta 1

1

Si no te he entendido mal lo que quieres es ejecutar un código si el ratón pasa más de X segundos sobre el elemento. Para esto tendrías que utilizar el método setTimeoutpara establecer el código a ejecutar y el tiempo y clearTimeout para anular la ejecución en caso de que el ratón salga del elemento antes de transcurrido el tiempo:

$(function(){
  var hoverTimeout;
  function mouseIn(){
    hoverTimeout = setTimeout(function(){ console.log('Han pasado 4 segundos'); }, 4000);
  }
  function mouseOut(){
    clearTimeout(hoverTimeout);
  }
  
  $('#card').hover(mouseIn, mouseOut);
});
#card{
  width: 100px;
  height: 100px;
  background-color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="card"></div>

Tu Respuesta

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