Make JQuery event available after a certain amount of time

Question

I'm trying to make one of those annoying popups when leaving your browser. However, I want the event to be available after a certain amount of time. The event should be allowed to trigger after a certain amount of time. I've seen stuff such as delay and setTimeout, but I have no idea how to implement it on my code.

JavaScript:

$(document).on("mouseleave", function (event) {
        if (event.pageY < 0) {
            $(".leavemodal").fadeIn(600);
        }
    });

Have a look here http://stackoverflow.com/questions/7317273/warn-user-before-leaving-web-page-with-unsaved-changes — Taner Topal, Sep 02 '16 at 09:41
This isn't what I'm after though, I just want the mouseleave on event.pageY to be available after a certain amount of time — xSketchy0, Sep 02 '16 at 09:44

score 2 · Accepted Answer · answered Sep 02 '16 at 09:46

This is not tested but maybe you can try this.

$(document).ready(function() {
    canRun = false;
    waitPeriod = 1000;// waiting time
    setTimeout(function() { canRun = true; }, waitPeriod);

    $(document).on("mouseleave", function (event) {
        if (!canRun) {
            return false;
        }
        if (event.pageY < 0) {
            $(".leavemodal").fadeIn(600);
        }
    });
});

Nenad Vracar · Answer 2 · 2016-09-02T09:48:31.873

If you want to use setTimeout() you can do something like this. Click event will be allowed 2 seconds after you mouseleave the element.

var click = false;

$('.el').mouseleave(function() {
  if (click == false) {
    setTimeout(function() {
      console.log('You can click now')
      click = true;
      $(this).click(function() {
        console.log('click')
      })
    }, 2000)
  }
})

.el {
  width: 200px;
  height: 200px;
  background: black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="el"></div>

Make JQuery event available after a certain amount of time

2 Answers2