clearInterval() Undefined Error After Using setInterval()

Question

I know this isn't supposed to be inline, but YUI library's dialogs force me to. My issue is that whenever I hover over this div, the margin-left scroll activated but it does not stop when I move the mouse out of the div. The JS console reports that:

Uncaught ReferenceError: timerID is not defined

And here's the code:

<div class="span1" onmouseover="
            var timerID;
             $(document).ready(function(){              
                    timerID = setInterval(scrollLeft, 10);

                    function scrollLeft(){
                        $('.inner_wrapper').animate({
                            marginLeft: '-=30px'
                        });
                    }
             });
             " onmouseout="clearInterval(timerID)">
        </div>

EDIT: The thing is that I can NOT run SCRIPT tags inside dialogs (they are already created via scripts, which filter any javascript besides inline one like onmouseover and onmouseout). So your suggestions of encapsulating the onmouseover and onmouseout handles in a single function will not work in this case.

Answer 1

It's a scope problem. You variable timerID is not visible in onmouseout.

Generally it is a good idea, to put stuff into a function instead of clobbering it all into the attributes. This avoids all these scope-problems. And it's an even better idea to use handlers instead of the on-...-atrributes.

Define your function outside the onmouseover attribute and call another function in the mouseout which clears it.

Something like this (to avoid nasty global varaibles)

var handler = (function(){
    var timerID;
    function scrollLeft(){
       $('.inner_wrapper').animate({
           marginLeft: '-=30px'
       });
    }
    return{
      mouseover:function(){              
            timerID = setInterval(scrollLeft, 10);
         },
      mouseout:function(){
            clearInterval(timerID);
      }
    }
})();

and then

<div class="span1" onmouseover="handler.mouseover()" onmouseout="handler.mouseout()">

or even better, bind the handlers directly via:

$('.span1').hover(function() {
    timerID  = setInterval(scrollLeft, 10); //mouseover
}, function() {
    clearInterval(timerID); //mouseout
});

As of new jQuery 1.7, .on()should be preferred.

Answer 2

$(document).ready(function() {
    var timerID = null;

    function scrollleft() {
        $('.inner_wrapper').animate({
            marginLeft: '-=30px'
        });
    }
    $('div.span1').hover(function() {
        timerID  = setInterval(scrollLeft, 10);
    }, function() {
        clearInterval(timerID);
    });
});​

and make you html like

<div class="span1"></div>

If you use .on('hover') then

$(document).ready(function() {
    var timerID = null;

    function scrollleft() {
        $('.inner_wrapper').animate({
            marginLeft: '-=30px'
        });
    }

    $('div.span1').on('hover', function(e) {
        if(e.type == 'mouseenter') {
           timerID  = setInterval(scrollLeft, 10);
        } else {
            clearInterval(timerID);
         }
    });
});