Блог

Главная - Вопросы по программированию - Базовая обработка событий слайдера

Базовая обработка событий слайдера

#javascript #jquery #slider

#javascript #jquery #слайдер

Вопрос:

Я сижу на базовом слайдере jQuery, чтобы немного узнать о разработке плагинов в jquery.

Что он делает:

  • он скользит справа налево
  • при вводе мыши интервал очищается и анимация останавливается
  • когда мышь покидает интервал, перезапускается

Но вот в чем проблема:

Когда я постоянно вхожу и выхожу из слайдера, функции анимации слайдов прерываются. анимация загрузки продолжается, как и предполагалось.

я считаю, что это не лучшая идея, которую слышит обработка событий на mouseenter и leave . думал о кнопках, которые обрабатывают эти вещи, но, возможно, здесь что-то другое совершенно неправильное / глупое. 🙂

посмотрите здесь: здесь:

Ответ №1:

Вы забыли очистить время ожидания и остановить слайдер перед init() (запуском) снова

Я обновил вашу скрипку

Изменения:

 var interval, timeout;

function stopSlider()   {
    console.log("function: stopSlider");        
    clearTimeout(timeout);
    clearInterval(interval);        
}

$('.slides').on('mouseenter', function()    {
    stopSlider();
}).on('mouseleave', function()  {
    stopSlider();
    timeout = setTimeout(init, pause);
});

function startSlider()   {
    // just a tip
    // $('.loading').animate({"width": "0"}, 0); // makes no sense, use instead .css()
    $('.loading').css('width', '0'); 
    ...
}

Комментарии:

1. Вау. Это очень помогло. Мне нужно прочитать об этой функции clearTimeout и когда ее использовать. Таким образом, это означает, что в основном тайм-аут запускается, запускается и запускается снова, и ни один из них не очищается. но поведение странное. я бы предположил, что тайм-ауты складываются и последовательно обрабатываются.

2. Пожалуйста 🙂 Правильно. Тайм-аут срабатывает снова и снова. Основная проблема заключалась в том, что вы сначала запускаете мышь mouseenter , которая запускает уже новый тайм-аут, который также запускает новый интервал (новый идентификатор 2 процесса). Теперь вы запускаете mouseleave и очищаете только первый (инициализированный идентификатор 1 процесса) интервал, но не интервал, который мы запускаем раньше (тайм-аут с 3 секундами).

Ответ №2:

Вместо очистки интервала вы можете попробовать использовать флаги для управления остановкой и запуском вашей анимации. Использование clearInterval для остановки анимации и возобновления ее путем создания нового интервала не является контролем над ней. Что-то вроде приведенного ниже может оказаться полезным для вашего случая и помочь вам в другом направлении. : 

 <div id='mySlider' style='width:200px;height:40px;background-color:blue;'></div>
<script>
  var mySlider = document.getElementById('mySlider');
  var isOver = true;

  mySlider.addEventListener('mouseenter' , function(){
    isOver = false;
  });
  
  mySlider.addEventListener('mouseout' , function(){
    isOver = true;
  });

  var myID = setInterval(function(){
    if(isOver === false)
      mySlider.style.width = parseInt(mySlider.style.width)   1   "px";
  },10);

</script>