0

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

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

Пример кода ниже:

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

/* if in tab mode */
$("ul.tabs li").click(function () {
  $(".tab_content").hide();
  var activeTab = $(this).attr("rel");
  $("#" + 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");
.locations {
     display: flex;
}
 .locations-gl__countries {
     width: 500px;
}
 .locations-gl__countries .countries__item {
     font-size: 32px;
}
 .locations-gl__countries .emea.active {
     color: #8fc056;
}
 .locations-gl__countries .asia.active {
     color: #8a80ce;
}
 .locations-gl__countries .america.active {
     color: #f05633;
}
 .locations-gl__countries .default {
     display: none;
}
 .locations-gl__map {
     width: 500px;
}
 .locations-gl__map .svg-map__item {
     width: 400px;
     height: 400px;
}
 .locations-gl__map .svg-map__item img {
     width: 100%;
     height: 100%;
     object-fit: cover;
}
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="locations">
  <div class="locations-gl__countries">
    <ul class="countries tabs">
      <li class="countries__item default active" rel="tabs1"></li>
      <li class="countries__item emea active" rel="tabs2">emea</li>
      <li class="countries__item asia active" rel="tabs3">asia</li>
      <li class="countries__item america active" rel="tabs4">america</li>
    </ul>
  </div>
  <div class="locations-gl__map tab_container">
    <div class="svg-map">
      <div class="svg-map__item tab_content" id="tabs1">
        <img src="https://images.unsplash.com/photo-1524661135-423995f22d0b?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1174&q=80" alt="">
        <p>после 5ти секунд бездействия, должна снова быть активна первая картинка</p>
      </div>
      <div class="svg-map__item tab_content" id="tabs2">
        <img src="https://images.unsplash.com/photo-1516738901171-8eb4fc13bd20?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80" alt="">
      </div>
      <div class="svg-map__item tab_content" id="tabs3">
        <img src="https://images.unsplash.com/photo-1549272183-089192d12cd3?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1974&q=80" alt="">
      </div>
      <div class="svg-map__item tab_content" id="tabs4">
        <img src="https://images.unsplash.com/photo-1515861461225-1488dfdaf0a8?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80" alt="">
      </div>
    </div>
  </div>
</div>

1 ответ 1

0

Функцию timeOutHelper вызывайте при клике.

let timeOut = null;

const timeOutHelper = () => {
  if (timeOut === null) {
    timeOut = setTimeout(() => {
      // ваша функция.
    }, 5000);
  } else {
    clearTimeout(timeOut);
    timeOut = null;
    timeOutHelper();
  }
};

Ваш ответ

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

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