Как обновить блок, если пользователь бездействует какое-то время?

Question

[Дмитрий]

Добрый день!
Подскажите пожалуйста, как реализовать следующее есть блок, в котором находится карта, есть активные кнопки, которые пользователь нажимает и показывается другая карта (то есть сейчас реализованы обычные табы)

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

Пример кода ниже:
https://codepen.io/moiseev1788/pen/rNvXeoz

Comments

[Вадим]

Для начала определитесь что Вы считаете за бездействие, потому что 5 секунд это достаточно мало.

Дальше, подписывайтесь на события, которые определяют пользовательскую активность и с дебаунсом в 5 секунд меняйте картинку на первую. Техника дебаунса как раз возьмёт на себя функционал отслеживания активности. Если пользователь затригерит событие, определяющее пользовательскую активность - таймер запустится заного.

[Дмитрий]

Вадим, за бездействие считаю, если человек не нажимал на кнопки

[Alexey Levicky]

https://medium.com/tinyso/how-to-detect-inactive-u...

Answer 1

[Сергей delphinpro]

let tm;
document.addEventListener('keypress', () => {
  clearTimeout(tm);
  tm = setTimeout(() => {
    alert('Ты бездействовал пять секунд!')
  }, 5000);
});

Comments

[Дмитрий]

Подскажите пожалуйста, как это реализовать в существующем коде?

[Сергей delphinpro]

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

[Максим Ткачев]

$(".tab_content").hide();
$(".tab_content:first").show();

/* if in tab mode */
$("ul.tabs li").click(function () { 
  
  var activeTab = $(this).attr("rel");
  togleTabs(activeTab);
  
});


function togleTabs(elemId){
  
  $(".tab_content").hide();
  var activeTab = elemId
  $("#" + activeTab).fadeIn();

  $("ul.tabs li").removeClass("active");
  $(this).addClass("active");

  $(".tab_drawer_heading").removeClass("d_active");
  $(".tab_drawer_heading[rel^='" + activeTab + "']").addClass("d_active");  
}


$(".tab_drawer_heading").click(function () {
  
  $(".tab_content").hide();
  var d_activeTab = $(this).attr("rel");
  $("#" + d_activeTab).fadeIn();

  $(".tab_drawer_heading").removeClass("d_active");
  $(this).addClass("d_active");

  $("ul.tabs li").removeClass("active");
  $("ul.tabs li[rel^='" + d_activeTab + "']").addClass("active");
});

$("ul.tabs li").last().addClass("tab_last");

var no_active_delay = 5; // Количество секунд простоя мыши, при котором пользователь считается неактивным
  var now_no_active = 0; // Текущее количество секунд простоя мыши
  setInterval("now_no_active++;", 1000); // Каждую секунду увеличиваем количество секунд простоя мыши
  setInterval("updateTabs()", 1000); // Запускаем функцию updateChat() через определённый интервал
  document.onmousemove = activeUser; // Ставим обработчик на движение курсора мыши
  function activeUser() {
    now_no_active = 0; // Обнуляем счётчик простоя секунд
  }
  function updateTabs() {
      if (now_no_active >= no_active_delay) { 
        // Проверяем не превышен  
        elemId="tabs1"
        togleTabs(elemId)
        activeUser();
    }
  }

[Максим Ткачев]

в function updateTabs() надо еще добавить проверку - активна ли сейчас первая вкладка, чтоб не перегружать уже открытую.

[Дмитрий]

Максим Ткачев, Добрый день, спасибо за код, это то что нужно. Подскажите пожалуйста, при клике на табы, появляется класс active, на них у меня завязаны цвета активной кнопки, как их вернуть?

[Максим Ткачев]

Дмитрий, в функции togleTabs() поправте строку $(this).addClass("active"); - всместо this укажите необходимый селектор

[Дмитрий]

Максим Ткачев, Спасибо все получилось, только столкнулся со следующей проблемой, после обновления кода, цвета у кнопок пропадают, не понимаю как это можно решить, если у вас есть свободная минута, подскажите пожалуйста

[Максим Ткачев]

Дмитрий,

function togleTabs(elemId) {  
  
  $(".tab_content").hide();
  var activeTab = elemId;
  $("#" + activeTab).fadeIn();

  $("ul.tabs li").removeClass("active");
  
  $('[rel="'+elemId+'"]').addClass("active"); 

  $(".tab_drawer_heading").removeClass("d_active");
  $(".tab_drawer_heading[rel^='" + activeTab + "']").addClass("d_active");
}

function updateTabs() {
  if (now_no_active >= no_active_delay) {
    // Проверяем не превышен
    elemId = "tabs1";
    togleTabs(elemId);
    $("ul.tabs li").addClass("active");
    activeUser();
  }

[Дмитрий]

Максим Ткачев, спасибо вам огромное

[Максим Ткачев]

Дмитрий, отметьте решением - это будет лучшей благодарностью

[Сергей delphinpro]

Максим Ткачев, так вы ответ напишите, чтобы его можно было отметить решением