How to Stop a Javascript Function from running after x seconds?

Question

I have a specific sweet alert on my website that I use for my div class that opens with onclick, but I want this onclick alert to stop after 60 seconds for example. So after 60 seconds the alert won't show up if I click the div.THis is what I got so far

<script type="text/javascript">
function JSalert(){
    swal("Error", "You have to watch the video first.", "error");
}
</script>


<div class="blocked" onclick="JSalert()">

Can you use a timer timout? https://javascript.info/settimeout-setinterval — MrTux, Aug 09 '18 at 11:50
Please refer the link below: https://stackoverflow.com/questions/13454830/end-javascript-function-after-10-seconds — Hitesh Panjawani, Aug 09 '18 at 11:53
Please confirm: Show an alert if user clicks div. If user clicks div after 60 seconds, then don't show alert. — freedomn-m, Aug 09 '18 at 11:53
Instead of blocking the function, just remove the click handler from the button. — Shilly, Aug 09 '18 at 11:55
Please do more research regarding the question before posting it in the StackOverflow. — Udara Seneviratne, Aug 09 '18 at 11:59
This is an x/y problem imho. The question should be, how do I remove an event from a button instead of how do I stop an event from triggering. Now you still have a click event that gets executed, but will do nothing and hence, use browser resources for no good reason. I would suggest: http://jsfiddle.net/kLrfvy6c/3/ — Shilly, Aug 09 '18 at 12:19
@Shilly why not add that as an answer? removing the click event after 60s would certainly satisfy the question. But it's not an xy problem given your solution. — freedomn-m, Aug 09 '18 at 12:43
I was typing this as an answer when the question got flagged as a duplicate, hence preventing new answers from being posted. — Shilly, Aug 09 '18 at 12:46
@Cerbrus nominated as reopen as the duplicate is how to stop something that has started while this is how to stop something from starting after a certain time. — freedomn-m, Aug 09 '18 at 13:05

score 4 · Accepted Answer · answered Aug 09 '18 at 11:57

As I understand the question (and based on the translated text in the alert) :

Give a warning if the user clicks the div
after 60seconds (an eternity in web time (5s here for testing)) then don't show the alert when they click

(From OPs: "after 60 seconds the alert won't show up if I click the div" or, put another way, "the alert won't show up if I click the div after 60 seconds")

var showalert = true;
setTimeout(function() { showalert = false; }, 5000);  /* 5s for testing */

function JSalert(){
  if (showalert) {
    alert("Please don't click too soon");
  }
}

<div class="blocked" onclick="JSalert()">click me, but not too soon</div>

This could be improved using data- attributes / jquery .data(), but the concept is the same.

If I understood correctly what OP wants, this is the closest answer. — RichieRock, Aug 09 '18 at 11:59

score -1 · Answer 2 · answered Aug 09 '18 at 11:56

What you lookin for is setTimeout: https://www.w3schools.com/jsref/met_win_settimeout.asp

Something like that in your JSalert function:

setTimeout(function() {
    // close modal here
}, 60000);

Or check the sweet alert docs there's also a timer: https://sweetalert.js.org/docs/#timer

How to Stop a Javascript Function from running after x seconds?

2 Answers2