Javascript clearInterval（）使用setInterval（）后出现未定义的错误

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

未捕获引用错误：未定义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>

编辑：问题是我不能在对话框中运行脚本标记（它们已经通过脚本创建，除了像onmouseover和onmouseout这样的内联脚本外，脚本还过滤任何javascript）。因此，您提出的将onmouseover和onmouseout句柄封装在单个函数中的建议在这种情况下不起作用。

var timerID;

变量被定义为

onmouseover

处理程序中的局部变量，因此

onmouseout

处理程序不知道它

---

将其声明为全局变量，或者更好—将其封装到一个对象中，该对象将包含

timerID

作为字段，

mouseover

和

mouseout

处理程序作为方法。

这是一个范围问题。您的变量

timerID

在onmouseout中不可见

一般来说，将内容放入函数中而不是将其全部放入属性中是一个好主意。这避免了所有这些范围问题。在-…-atributes上使用处理程序而不是

，这是一个更好的主意

在
onmouseover
属性之外定义您的函数，并调用
mouseout
中的另一个函数以清除该函数

类似这样的事情（避免令人讨厌的全球变化）

然后

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

从新的jQuery 1.7开始，应首选
.on（）

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

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

让你喜欢html

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

混合使用标记和JavaScript是不好的。将它们分开，并按如下方式分别工作

HTML:

timerID在onmouseover中定义，但不在onmouseout中定义

因此，您可以执行以下操作：

<script type="text/javascript">

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

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

       $("#timer").mouseover(function() {

            timerID = setInterval(scrollLeft, 10);


       }).mouseout(function() {
            clearInterval(timerID)
       }); 

   }); 

</script>

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


var scrollLeft=函数（）{
$（'.inner_wrapper'）。设置动画({
边缘左侧：'-=30px'
});
}; 
var-timerID；
$（文档）.ready（函数（）{
$（“#计时器”）.mouseover（函数（）{
timerID=setInterval（向左滚动，10）；
}).mouseout（函数（）{
清除间隔（timerID）
}); 
}); 
试试setInterval（“scrollLeft（）”，10）问题是我无法将Javascript与HTML分开。我知道这是编码标准和更好的标记，但我使用的对话框库只允许在内联（例如在onmouseover中）而不是外部（在外部js文件中或被脚本标记包围）时运行脚本。问题是我不能运行外部javascript，无论是在它自己的脚本标记中还是在加载的js文件中。我只能选择像在onmouseover和onmouseout中一样使用内联JS。如果有一种方法可以在这两个属性之间共享一个变量，那么就可以了。（就像某种超级全局变量，对整个文档有效）@user1364793好吧，我想这是个问题。我不知道这种情况下的任何解决方案。我被迫使用内联JS，所以这不是我的选择。我需要一种使用onmouseover属性运行函数并使用onmouseout属性停止函数的方法。不幸的是，正如我在编辑的问题中所说的，我不能在onmouseover和onmouseout等内联属性之外使用JS。
<div class="span1"></div>

$(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);
         }
    });
});

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

var timerID = null;

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

$(document).ready(function() {
    $(".span1").hover(function() {
        timerID = setInterval(scrollLeft, 10);
    }, function() {
        clearInterval(timerID);
    });
});

<script type="text/javascript">

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

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

       $("#timer").mouseover(function() {

            timerID = setInterval(scrollLeft, 10);


       }).mouseout(function() {
            clearInterval(timerID)
       }); 

   }); 

</script>

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