javascript - clearInterval()使用setInterval()后出现未定义的错误

我知道这不应该是内联的，但是YUI库的对话框迫使我这么做。我的问题是，每当我将鼠标悬停在此div上时，就会激活左边缘滚动，但是当我将鼠标移出div时它不会停止。 JS控制台报告:



这是代码:

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

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

编辑:问题是我不能在对话框中运行SCRIPT标记(它们已经通过脚本创建，该脚本可以过滤除onmouseover和onmouseout等内联代码之外的任何JavaScript)。因此，在这种情况下，您关于将onmouseover和onmouseout句柄封装在单个函数中的建议将不起作用。

最佳答案

这是一个范围问题。您的变量timerID在onmouseout中不可见。

通常，将内容放入函数中而不是将其全部破坏到属性中是一个好主意。这样可以避免所有这些范围问题。使用处理程序代替on-... -atrributes是一个更好的主意。

在onmouseover属性之外定义函数，然后在mouseout中调用另一个函数将其清除。

这样的事情(以避免讨厌的全局变数)

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

然后

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

甚至更好的是，直接通过以下方式绑定(bind)处理程序:

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

从新的jQuery 1.7开始，应首选.on()。