Refresh setInterval on Hover

Question

У меня есть функция setInterval(), которая каждые четыре секунды меняет изображение на моей странице, просто используя одно значение.

setInterval(function(){ 
    changeSlide(slideNumber); 
    slideNumber++; 
    if(slideNumber===5)slideNumber=0; 
},4000); 

Как вы видите, это значение slideNumber.

Теперь, что я хочу:

При перемещении MouseEnter на элементе (позволяет сказать, что идентификатор = «hoverElement»), интервал должен остановиться, потому что картина должна оставаться на месте, и мое changeSlide шоу и скрыть те картинки.

И когда вы наведите указатель мыши, он ждет этих 4000 мс и продолжит.

Как я могу это сделать?

EDIT:

К сожалению, он не работает

Это мой код

function slide(){ 
    slideTimer = setInterval(function(){ 
     changeSlide(slideNumber); 
     slideNumber++; 
     if(slideNumber===5)slideNumber=0; 
    },4000); 
} 

slide(); 

$('#hoverElement').mouseenter(function(){ 
    clearInterval(slideTimer); 
    console.log('mouseenter'); 
}); 
$('#hoverElement').mouseleave(function(){ 
    slide(); 
    console.log('mouseleave'); 
}); 

Почти та же, и оно не останавливает интервал на MouseEnter. Я пробовал свой код раньше, и он тоже не работал.

Answer 1

Просто начните и очистить интервал по наведению:

var timer, slideNumber = 0; 

function slide() { 
    timer = setInterval(function(){ 
     changeSlide(slideNumber); 
     slideNumber++; 
     if(slideNumber===5) slideNumber=0; 
    },4000); 
} 

function unslide() { 
    clearInterval(timer); 
} 

slide(); 

$('#hoverElement').on({ 
    mouseenter: unslide, 
    mouseleave: slide 
}); 

Вот DEMONSTRATION, чтобы показать, что это работает!