Как я могу создать этот пользовательский слайдер с задержкой в ​​JavaScript? - PullRequest
Новая
       5

Как я могу создать этот пользовательский слайдер с задержкой в ​​JavaScript?

0 голосов
/ 13 февраля 2020

Я пытаюсь создать слайдер, который автоматически проигрывает пять слайдов с интервалом в 15 секунд. В настоящее время у меня есть слайды, работающие с al oop, но я хочу, чтобы пользователь мог наводить курсор над слайдом, немедленно останавливать предыдущую функцию и начинать новую. Таким образом, слайд продолжится с новой начальной точки, выбранной пользователем. Я использую JavaScript и хотел бы пока держаться подальше от любого jquery. 

//Top Excursions
    //variables
    image = document.querySelector('.overview__menu__img');
    options = document.querySelectorAll('.overview__menu__option');
    excursionCount = 0;

    async function Excursion(order) {
      excursionCount += 1;
        hoverTracker = excursionCount;
        while (hoverTracker == excursionCount) {
        //begin loop
        var i = order;
        for (i; i < options.length; i++) {
          //remove all active option classes
          Array.prototype.forEach.call(options, function(elements, index) {
            elements.classList.remove('overview__menu__option__active');
          });            
          //add correct option class
          options[i].classList.add('overview__menu__option__active');
          //find type and add image
          image.style.backgroundImage = 'url(Assets/Projects/Wildlife__Observation/Expeditions/' + options[i].getAttribute("type") + '.jpg)';
          //wait for animation
          await sleep(5000);

          console.log('Function ID: '+ hoverTracker);
          console.log('Function Count: '+ excursionCount);
          if (hoverTracker !== excursionCount) {
            options[i].classList.remove('overview__menu__option__active');
            return;
          }
          if (i >= options.length - 1) {
            i = -1;
          }
        }
      }
    }
    Excursion('0');

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

Я пытаюсь создать глобальная переменная (excursionCount), которая отслеживает, сколько раз была вызвана функция, и локальная переменная (hoverTracker), которая является копией глобальной переменной. Цель состоит в том, чтобы добавлять к глобальной переменной каждый раз, когда пользователь запускает другую функцию, но я не могу обновить только одну из переменных. Либо оба обновления, либо ни один из них не установлен (в настоящее время установлено так, что оба обновления)

Если обе переменные одинаковы, продолжите функцию, но если другая функция запустилась в течение 15-секундной задержки (длительность одного полного слайда времени ) затем верните функцию.

...