Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 18.04.2019, 17:44
Новичок на форуме
Отправить личное сообщение для Alex196 Посмотреть профиль Найти все сообщения от Alex196
 
Регистрация: 18.04.2019
Сообщений: 2

setInterval / clearInterval
Привет всем!
У меня следующая проблема. Использовал setInterval чтобы автоматически перелистывать страницы. Но в то время когда слайды сами листаются нажать на стрелку вперед или назад слайды начинают неадекватно прыгать туда сюда. Как я понимаю, нужно использовать clearInterva. Только я не смог его применить. Тут код реализации слайдов. Подскажите пожалуйста куда воткнуть clearInterval l чтобы это дело нормально работало?)
Заранее большое спасибо!!
let slides = document.querySelectorAll(".feedback-slider-item"),
        prev = document.querySelector(".main-prev-btn"),
        next = document.querySelector(".main-next-btn"),
        slideIndex = 1;

    showSlides(slideIndex);
    
    function showSlides(n) {
        (n > slides.length) ? slideIndex = 1 : "" ;
        (n < 1) ? slideIndex = slides.length : "";
             
        slides.forEach(item => item.style.display = "none");
        slides[slideIndex - 1].style.display = "block";
    }

    //let timerId = setInterval(() => showSlides(slideIndex), 2000);

    function plusSlides(n) {    
        //clearTimeout(timerId);
        setInterval(() => showSlides(slideIndex += n), 2000);        
    }
    next.addEventListener("click", () => { plusSlides(1); });   
    prev.addEventListener("click", () => { plusSlides(-1); });
Ответить с цитированием
  #2 (permalink)  
Старый 18.04.2019, 18:29
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,121

Alex196,
let slides = document.querySelectorAll(".feedback-slider-item"),
        prev = document.querySelector(".main-prev-btn"),
        next = document.querySelector(".main-next-btn"),
        slideIndex = -1,
        timerId;

    function showSlides(n) {
        clearTimeout(timerId);
        slideIndex += (n + slides.length);
        slideIndex %= slides.length;
        slides.forEach((item, i)  => item.style.display = slideIndex == i ? "block" : "none");
        timerId = window.setTimeout(showSlides, 2000, n)
    }
    showSlides(1);
    next.addEventListener("click", () => { showSlides(1); });
    prev.addEventListener("click", () => { showSlides(-1); });
Ответить с цитированием
  #3 (permalink)  
Старый 19.04.2019, 09:44
Новичок на форуме
Отправить личное сообщение для Alex196 Посмотреть профиль Найти все сообщения от Alex196
 
Регистрация: 18.04.2019
Сообщений: 2

Отлично работает!! Большое спасибо!
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
setInterval и clearInterval singmen Общие вопросы Javascript 5 22.08.2014 15:48
проблема с setInterval / clearInterval max0n Общие вопросы Javascript 4 11.09.2012 12:12
таймер обратного отсчета (Setinterval и ClearInterval) Vampir3 Общие вопросы Javascript 1 11.08.2012 19:27
Проблема с setInterval и clearInterval kat-khmara Events/DOM/Window 5 25.06.2012 16:52
clearInterval и setInterval из разных локаций. Bakuryu Events/DOM/Window 6 27.07.2008 22:45