1

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

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

2 ответа 2

4

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>

9
  • P.s. и всё равно, это насилие над пользователем!) Попапить ему раз в три минуты. Commented 9 февр. 2020 в 15:53
  • Добрый вечер! Дак мне и не нужно каждые 3 минуты, мне нужно только второй раз, чтобы через 3 минуты выскакивал и больше не выскакивал) Commented 9 февр. 2020 в 15:57
  • @АлёнаЧащина события можно отключать через .off() - добавил в код. Аналог в JS - addEventListener() / removeEventListener() Commented 9 февр. 2020 в 18:12
  • Добрый вечер! Ваш код не работает((( Окошко выскакивает каждый раз как только мышка вверх уходит. Commented 10 февр. 2020 в 15:00
  • @АлёнаЧащина Ну здесь ведь работает при запуске кода) Уменьшил до 10 секунд для наглядности. Значит что-то не так перенесено. Обращаю внимание, что .mouseleave(... заменил на .on('mouseleave', ... Commented 10 февр. 2020 в 16:51
0

Как-то так:

$(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)
  }
})

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.