Основная обработка событий слайдера

Question

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

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

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

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

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

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

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

Answer 1

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

Я обновил свои fiddle

Изменения:

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'); 
    ... 
} 

Answer 2

Вместо очистки интервал, вы можете попробовать использовать флаги для управления Stop и Go вашей анимации. Использование 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>