Закрытие слайдера при прокрутке вверх до начала классов тайм-аута

Question

Наличие этой проблемы с этим ползунком. Этот скрипт прокрутки работает хорошо, когда я прокручиваю медленно. Идея в том, что когда active == 1 (он проверяет переменную в локальном хранилище), ползунок выскакивает через 3 секунды. И это работает все хорошо, когда идет медленно. Прокрутите вниз медленно ... оно всплывает. Прокрутите назад медленно ... это уходит.

Проблема в setTimeout. Если я прокручиваю очень быстро вверх и вниз и поднимаю его вверх, то по истечении тайм-аута добавляется класс isActive, потому что он пошел «вниз», а затем «вверх» очень быстро. Таким образом, вы могли бы очень быстро прокручиваться, go к вершине, и ползунок появится после 3100.

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

var tabElement = $('.c-risk-survey-slideout');
var active = 0;


$(window).scroll(function() {
  var cookie1 = getCookie("cookie1");
  var cookie2 = getCookie("cookie2");
  if ($(window).scrollTop() > $('html').height() / 9) {


    if (cookie1 !== null && cookie2 !== null) {

      if (screen.width > 767) {
        setTimeout(function() {
          if (localStorage.getItem('Survey') == null) {
            tabElement.addClass('isActive');

          }

          if (active == 1) {

            tabElement.addClass('tab-open');
            tabElement.removeClass('animated');
            active = 0;
            setTimeout(function() {
              tabElement.removeClass('tab-open');
              tabElement.addClass('animated');
            }, 3000);
          }
        }, 3100);
      }

    }

  }

  if ($(window).scrollTop() < $('html').height() / 9) {
    tabElement.removeClass('isActive');

  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="c-risk-survey-slideout d-flex animated bounce">
  <div class="c-risk-survey-slideout__tab d-flex justify-content-center align-items-center"><i class="c-risk-survey-slideout__caret far fa-angle-left"></i></div>
  <div class="c-risk-survey-slideout__main d-flex justify-content-center align-items-center flex-column u-px-8">
    <h3 class="c-risk-survey-slideout__title text-center font-weight-bold text-white u-my-0 u-mb-3">Where are your security gaps?</h3>
    <button class="btn btn--purple c-risk-survey-slideout__cta u-mt-3 irs-survey-start">Take the identity quiz</button>
  </div>
</div>

Answer 1

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

var tabElement = $('.c-risk-survey-slideout');
var active = 0;

// declare your timers
var showTimer = null;
var closeTimer = null;

$(window).scroll(function() {
  var cookie1 = getCookie("cookie1");
  var cookie2 = getCookie("cookie2");

  if ($(window).scrollTop() > $('html').height() / 9) {
    // only setup timer if no timer already exist, you don't want to trigger it multiple times
    if (cookie1 && cookie2 && screen.width > 767 && !showTimer) {
      // assign timer for opening
      showTimer = setTimeout(function() {
        if (localStorage.getItem('Survey') == null) {
          tabElement.addClass('isActive');
        }

        if (active == 1) {
          tabElement.addClass('tab-open');
          tabElement.removeClass('animated');
          active = 0;
        
          // assign timer for closing
          closeTimer = setTimeout(function() {
            tabElement.removeClass('tab-open');
            tabElement.addClass('animated');
          }, 3000);
        }
      }, 3100);

    }
  } else {
    // condition no longer is met so we clear your timers so they no longer trigger
    clearTimeout(showTimer);
    clearTimeout(closeTimer);
    showTimer = null;
    closeTimer = null;
    tabElement.removeClass('isActive');
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="c-risk-survey-slideout d-flex animated bounce">
  <div class="c-risk-survey-slideout__tab d-flex justify-content-center align-items-center"><i class="c-risk-survey-slideout__caret far fa-angle-left"></i></div>
  <div class="c-risk-survey-slideout__main d-flex justify-content-center align-items-center flex-column u-px-8">
    <h3 class="c-risk-survey-slideout__title text-center font-weight-bold text-white u-my-0 u-mb-3">Where are your security gaps?</h3>
    <button class="btn btn--purple c-risk-survey-slideout__cta u-mt-3 irs-survey-start">Take the identity quiz</button>
  </div>
</div>