clearInterval（）使用setInterval（）后出现未定义的错误 [英] clearInterval() Undefined Error After Using setInterval()

问题描述

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

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:

未捕获的ReferenceError：未定义timerID

Uncaught ReferenceError: timerID is not defined

以下是代码：

<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标签（它们已经通过脚本创建了，除了内联之外的任何javascript过滤，如onmouseover和onmouseout）。所以你在单个函数中封装onmouseover和onmouseout句柄的建议在这种情况下不起作用。

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.

推荐答案

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

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

一般来说，将东西放入函数是个好主意而不是将它全部破坏到属性中。这避免了所有这些范围问题。使用处理程序而不是 on -... -atrributes是一个更好的主意。

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.

定义你的在 onmouseover 属性之外的函数，并在 mouseout 中调用另一个函数来清除它。

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

然后

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

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

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

这篇关于clearInterval（）使用setInterval（）后出现未定义的错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！