CODEWITHSUNDEEP
javascriptjqueryhtml
Luis Fernandez
Luis Fernandez

Reputation: 559

Trigger a function after clicking on an image for 3 seconds

I have an invisible button on my web that, when pressed for 3 seconds, I want it to do something.

So far I've tried this:

$("#basicChn").on({
  mousedown: function() {
    $(this).data('timer', setTimeout(function() {
      launchBasicChannel();
    }, 3000));
  },
  mouseup: function() {
    clearTimeout($(this).data('timer'));
  }
});

function launchBasicChannel() {
  tts.say("Basic channel has been launched");
}
.recRojo {
  position: absolute;
  right: -30px;
  top: -30px;
  visibility: hidden;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img src="imagenes/index/Rectangulo.png" class="recRojo" alt="btnSecreto" id="basicChn">

However, it is not working. Any ideas on how to fix it?

Upvotes: 0

Views: 165

Answers (1)

Icewine
Icewine

Reputation: 1851

Or you could write it a little like this.

// hold mouse on the hidden object for 3 seconds to launch
$("#hiddenImage").on("mousedown", function(e) {
    
    clearTimeout(this.downTimer); // clear the timer
    
    // start the timer for 3 seconds
    this.downTimer = setTimeout(function() {
        launchBasicChannel();
    }, 3000);
    
}).mouseup(function(e) {
    clearTimeout(this.downTimer); // clear the timer
});

function launchBasicChannel() {
  console.log("Basic channel has been launched");
}
#hiddenImage {
  position: absolute;
  right: -30px;
  top: -30px;
  /*visibility: hidden;*/
  background: red;
  width: 100px;
  height: 100px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="hiddenImage"></div>

Upvotes: 1

Related Questions