javascript - 怎样让鼠标移出时清除鼠标移入的计时器？

Question

我在做一个鼠标移入时的一个修改背景图坐标的图片动画，移入顺序播放到终点时回到中间的一个位置继续播放，移出倒序播放，现在我移出的时候怎么清除移入时的定时器啊？

<script type="text/javascript">
        var imgBox = document.getElementById('left');
        var num = 0;
        var num0 = 15;
        imgBox.onmouseover = function () {
            var timer = setInterval( qute , 50 );
        }
        imgBox.onmouseout = function () {
                clearInterval( timer ); 
                var timerout = setInterval( quteout , 50 );
                if ( num < 0 ) {
                    clearInterval(timerout);
                };
            }
        function qute () {
                num++;
                if ( num == 15 ) {
                    num = 10;
                }
                imgBox.style['background-position-x'] = -num*80 + 'px'; 
            }
        function quteout () {
            num0--;
            if ( num0 < 0 ) {
                num0 = 0;
            }
            imgBox.style['background-position-x'] = -num0*80 + 'px'; 
        }
    </script>

Answer 1

把var timer放在onmouseover外面声明，不然clearInterval访问不到timer这个变量

Answer 2

timer变量放在function外面就好了

Answer 3

对于公共定义变量 timer 和 timeout 可以在后面function前定义，在function内对变量赋值，重写。

Answer 4

亲js是函数作用域，你把那个对定时器的引用保存到那个函数里面，同作用与下的函数是读取不到的啊当然取消不了啊，你可以先在外面var timer = null，然后在你的鼠标进入是把这个变量赋值为setTimeout