jquery - Temporarily disabling javascript function from repeating after mouseleave -

i have image gallery rotates through rotator class divs on www.creat3dprinters.com pauses on mouseenter , fires again 1 second after mouseleave.

however, if user moves mouse in , out of rotator class div function calls stack , visible changes until 'stack' completed.

i want 1 second delay has not been completed cancelled on 2nd , subsequent mouseenter not happen.

i have tried using cleartimeout within mouseenter function not seem work.

i know there stop() function did not work either.

any suggestions appreciated.

jquery(document).ready(function () {     var initlist = setinterval('rotateit()', 4000);      $('.rotator').mouseenter(function () {         clearinterval(initlist);     }).mouseleave(function () {         timeout = settimeout(function () {             rotateit()         }, 1000);         initlist = setinterval('rotateit()', 4000);     }) });    function rotateit() {     cleartimeout(timeout);      if ($('#rotator-visible').next('.rotator').length == 0) {         $('.rotator:first').attr('id', 'rotator-visible');         $('.rotator:last').removeattr("id");      } else {         $('#rotator-visible').removeattr("id").next('.rotator').attr("id", "rotator-visible");     } } 

if user moves mouse in , out of rotator class div function calls stack up

then cleartimeout - , in place, not in delayed rotateit. simplest solution call cleartimeout every time before settimeout, can sure there 1 active timeout @ once.

jquery(document).ready(function($) {     var initlist = setinterval(rotateit, 4000),         delay = null;      $('.rotator').mouseenter(function(e) {         clearinterval(initlist);     }).mouseleave(function(e) {         cleartimeout(delay);         delay = settimeout(function () {             rotateit();             initlist = setinterval(rotateit, 4000);         }, 1000);     }) });  function rotateit() {     if ($('#rotator-visible').next('.rotator').length == 0) {         $('.rotator:first').attr('id', 'rotator-visible');         $('.rotator:last').removeattr("id");     } else {         $('#rotator-visible').removeattr("id").next('.rotator').attr("id", "rotator-visible");     } }