使用 setInterval() 后的 clearInterval() 未定义错误

Question

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

未捕获的 ReferenceError：timerID 未定义

这是代码：

<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 之外，它会过滤任何 javascript）。因此，您将 onmouseover 和 onmouseout 句柄封装在单个函数中的建议在这种情况下不起作用。

Answer 1

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

通常，将东西放入函数中而不是将其全部放入属性中是个好主意。这避免了所有这些范围问题。使用处理程序而不是on-...-atrtributes是一个更好的主意。

在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()">

或者甚至更好，直接通过以下方式绑定处理程序：

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

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