Как показывать попап только 2 раза с разницей в 3 минуты?

Question

всем программерам JavaScript! Я новичок и интересует такой вопрос: У меня на сайте срабатывает функция mouseleave (когда посетитель уводит курсор вверх со страницы), а внутри лежит код который активирует попап. Мне нужно, чтобы этот код срабатывал только 2 раза: первый как и сейчас, а второй только через 3 минуты - то есть если посетитель увёл мышь вверх, увидел попап, закрыл его, то в ближайшие 3 минуты, если он будет уводить мышку вверх попап не будет всплывать. Перебровала кучу способов и вариантов, но видимо что-то делаю не так((( Подскажите что делать? Вот мой изначальный код:

$(document).mouseleave(function(e){
  if (e.clientY < 0) {
    $("#staypopup").addClass("show");
  }
})

Answer 1

new Date().getTime() возвращает количество миллисекунд, прошедших с 1-го января 1970. Ну и три минуты в миллисекундах - 180000 :

var lastPop = 0;
var count = 0;

$(document).on('mouseleave', popup);

function popup(e){
  var now = new Date().getTime();
  var left_3min = 10000 < ( now - lastPop );
  
  console.log(now - lastPop);
  
  if (e.clientY < 0 && left_3min) {
    $("#staypopup").addClass("show");
    lastPop = now;
    
    if( ++count == 2 )
      $(document).off('mouseleave', popup);
  }
}

#staypopup { display: none; }
#staypopup.show { display: block; padding: 50px; background: orange; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="staypopup" onclick="this.classList.remove('show')">Закрыть</div>

Answer 2

@OPTIMUS PRIME Добрый день! Пришли к выводу, что код должен срабатывать только если это новый посетитель. То есть должна быть проверка куки - но с этим у меня опыта совсем нет. Попробовала по нескольким примерам доработать - но безуспешно. Помогите плиз!

Answer 3

Как-то так:

$(document).on('mouseleave.show-staypopup', function (e) {
  if (e.clientY < 0) {
    $("#staypopup").addClass("show")
    $(document).off('mouseleave.show-staypopup')

    setTimeout(function () {
      $(document).on('mouseleave.show-staypopup', function (e) {
        if (e.clientY < 0) {
          $("#staypopup").addClass("show");
          $(document).off('mouseleave.show-staypopup')
        }
      })
    }, 180000)
  }
})

БЛОГ НА HUSL

Как показывать попап только 2 раза с разницей в 3 минуты?

Ответы (3 шт):