Как вызвать функцию через промежуток времени?

Question

[focusss]

Есть код, если есть кука, то баннер не открывается, если её нет, то баннер открывается. Мне теперь нужно эту функцию вызывать через 90 секунд в общей сложности, не зависимо на какой я страницы нахожусь.

То есть, если я зашёл на главную и там пробыл 20 секунд, а затем перешёл ещё на одну страницу и там провёл 70 секунд, то вызывать функцию.

Можете подсказать порядок действий, а то я загнался. Гугл тоже не помог.

let popupoverlay = document.querySelector('.popup-ero');
    let popupoblock = document.querySelector('.popup-block');
    let popupclose = document.querySelector('.popup-close');
    // let datecookie = new Date(Date.now() + 86400e3 * 10); 10 дней
    let datecookie = new Date(Date.now() + 60000); //60 секунд
    datecookie = datecookie.toUTCString();

    

    function check_cookie_name(name) 
    {
        let match = document.cookie.match(new RegExp('(^| )' + name + '=([^;]+)'));
      if (match) {
        console.log(match[2]);
        console.log('есть кука, не открываем баннер');
      }
      else{
        //куки нет, открываем баннер навешивая классы и записываем куку на 10 дней.
        popupoverlay.classList.add('active');
        popupoblock.classList.add('active');
        document.cookie = "visit2=1; expires=" + datecookie;
      }
   }

   // Вот эту функцию нужно вызывать

    check_cookie_name('visit2');

    // Вот эту функцию нужно вызывать

У меня в планах так:

1. При заходе на сайт создаю куку с нынешним временем.
2. Потом создаю функцию.
3. Внутри функцию SetInterval каждые 3 секунды, где происходит сравнение. Если нынешние время больше заданной куки на 90 секунд, то дальше в if() {вывод функции}

Верно? Пытался, но запутался.

Comments

[edward_freedom]

в куки или локалстор записывай текущее время https://developer.mozilla.org/ru/docs/Web/JavaScri...
и в setInterval проверяй

[focusss]

edward_freedom, Спасибо, значит верно мыслю. С реализацией правда хромаю. Это самый правильный способ? Просто в js недавно, хотелось бы знать. Подсказать некому.

[WbICHA]

Зачем тебе интервал? У тебя есть время начала, высчитываешь сколько осталось времени запихиваешь результат в сеттаймаут.

[focusss]

WbICHA, Хмм, и вправду. Тогда сеттаймаут сработает 1 раз в нужный момент, а сетинтервал будет долбать и дальше.

Спасибо.

[edward_freedom]

focusss, я бы не проверял каждые n секунд, а сохранил время появления банера, например зашли на страницу в 10 минут, а банер должен появится через 5 минут в 15 минут, сохраняем 15 минут и устанавливаем в сетинтервал сохраненное время - текущее. В итоге, интервал в setinterval будет 5 минут и через 5 минут сработает

[Евгений]

Я бы начал писать web worker))

[focusss]

edward_freedom, Не поможете? Я в ступоре, не могу высчитать сколько осталось времени до момента, как от создания куки пройдёт +10 секунд, чтоб этот результат записать в переменную и подставить в сеттаймаут.

//если кука есть , то нужно сравнить, если от времени в куки прошло больше 10 секунд
        //то открываем сенттаймаут и кладём внутрь сеттаймат функцию открытия поп ап окна
        //сеттаймат запускается через время, которое высчитываем между кукой и текущем временем. 
        //Чтоб вышло через 10 секунд открытие.

        function getCookieTwo(name) {
            var matches = document.cookie.match(new RegExp(
                "(?:^|; )" + name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\$1') + "=([^;]*)"
            ));
            return matches ? decodeURIComponent(matches[1]) : undefined;
        }

        let timecook = getCookieTwo('timepopup'); // получаю значение куки время в мл.сек


        //Вот тут затык, я получил время из куки, теперь мне нужно
        //сравнить, сколько осталось времени до того момента, как от времени куки будет + 10секунд

        setTimeout(() => {  //запускаю функцию открытия поп апа через 10 секунд
            check_cookie_name('visit2');
        }, 10000); //вот сюда нужно подставить переменную через скок сработает таймаут

Answer 1

[StiflerProger]

// эту функцию запускать при открытии страницы
function init() {
  const timeToBanner = 20; // время в секундах до показа баннера
  const cookieName = 'time-to-banner';

  // сразу проверяем текущую куку
  if (!getCookie(cookieName)) setCookie(cookieName, Math.floor(Date.now() / 1000)); // Date.now даёт время в мс. переводим в секунды для удобства

  // теперь остаётся только проверить прошло ли `timeToBanner` времени с момента установки куки
  if (Number(getCookie(cookieName)) < Math.floor(Date.now() / 1000) - timeToBanner) {
    // прошло `timeToBanner` секунд. Можно показывать баннер
    console.log(`Прошло ${timeToBanner} секунд. Показывай баннер! =)`)

    setCookie(cookieName, null, -1); // удаляем куки с браузера
  } else {
    // до банера время не дошло
    setTimeout(init, 1000);
  }
  
}

function getCookie(name) {
  const value = `; ${document.cookie}`;
  const parts = value.split(`; ${name}=`);
  if (parts.length === 2) return parts.pop().split(';').shift();
}

function setCookie(name, value, days) {
  let expires = "";
  if (days) {
    let date = new Date();
    date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
    expires = "; expires=" + date.toUTCString();
  }
  document.cookie = name + "=" + (value || "") + expires + "; path=/";

  return value;
}

Нужно просто вызывать init()

Comments

[focusss]

Боже, просто огромное спасибо. Только благодаря вашему ответу понял, как с этой датой работать, а то не мог понять как в сетинтервал остаточное время вставить))) Спасибо, как пособие теперь будет)

Answer 2

[ikotyax]

Попробуй через setTimeout()

Comments

[WbICHA]

Непревзойдённый гений!
Ты бы хотя бы комментарии перед бесполезным ответом прочитал.