Как сделать, чтобы модалка появилась через 5 секунд непосредственного нахождения на странице,даже если до этого она была открыта в неактивной вкладке?

Question

[wqertAnna]

Мне нужно, чтобы модалка появлялась через 5 секунд пребывания пользователя на странице.
Я использую setTimeout и получается, что если открыть страницу в другой вкладке и не переходить на эту вкладку, а через 5 сек перейти, то модалка появится сразу.

Comments

[irishmann]

Вопрос: зачем? Меня, как пользователя, жутко нервируют такие модальные окна, вряд-ли я потом снова зайду на такой сайт. Задумайтесь.

[Froggyweb]

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

[wqertAnna]

irishmann, я не особо люблю такие модалки, но это же не вопрос моей воли. ПМ поставил такую задачу, а перед ним её ставит клиент.

Answer 1

[Антон Спирин]

Вам надо использовать window.onfocus и window.onblur.
По onfocus заводить таймаут. По onblur чистить.

let timeout = null;

const handleClearTimeout = () => {
  clearTimeout(timeout);
};

const handleSetTimeout = () => {
  timeout = setTimeout(() => {
    showModal();
    window.removeEventListener('focus', handleSetTimeout);
    window.removeEventListener('blur', handleClearTimeout);
  }, 5000);
};

window.addEventListener('focus', handleSetTimeout);
window.addEventListener('blur', handleClearTimeout);

if (document.hasFocus()) {
  handleSetTimeout();
}

Comments

[wqertAnna]

Спасибо большое, мне очень нравится решение!