事件队列，求助~！

你发过一个模块移动的贴子对不对，我改写代码实现后，找不到主题了。出现问题的原因是，onmousemove会多次触发，声明的变量Time在还没有清除，就赋值给了新setInterval(...)，所以旧的计时函数得以持续进行。
改写方法是Time=[]模拟一个FIFO队队，使用push(setInerval(...))，if判断里边使用clearInterval(Time.shift())，就可以解决问题。
注意你的if判断在修改style.left之后，所以div2总会移动。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title></title>
        <style type="text/css">
            #div1 {
                width: 948px;
                height: 40px;
                overflow: hidden;
                position: relative;
                border: 1px #efefef solid;
            }
            #div2 {
                width: 40px;
                height: 40px;
                overflow: hidden;
                position: absolute;
                background-color: #bf0000;
                top: 0px;
                left: 0px;
            }
        </style>
        <script type="text/javascript">
            //获取鼠标坐标
            function getMouseXY(ev) {
                if (ev.pageX || ev.pageY) {
                    return {
                        x: ev.pageX,
                        y: ev.pageY
                    };
                }
                return {
                    x: ev.clientX + document.body.scrollLeft - document.body.clientLeft,
                    y: ev.clientY + document.body.scrollTop - document.body.clientTop
                };
            }            //获取元素左坐标
            function getOffsetLeft(obj) {
                var left = 0;
                var offsetParent = obj;
                while (offsetParent != null && offsetParent != document.body) {
                    left += offsetParent.offsetLeft;
                    offsetParent = offsetParent.offsetParent;
                }
                return left;
            }            window.onload = function () {
                var div1 = document.getElementById('div1'); //获取父级ID
                var div2 = document.getElementById('div2'); //获取子级ID
                var time = []; //计时器
                var output = function (id, text) {
                        document.getElementById(id).innerHTML += text + '<br/>';
                    };                div1.onmousemove = function () {
                    time.push(setInterval(function () {
                        var left1 = getOffsetLeft(div2);
                        div2.style.left = left1 + 1 + 'px';
                        var left2 = getOffsetLeft(div2);
                        output('p1', 'time.push() : ' + time + ', left: ' + left2);
                        if (left2 >= 100) {
                            clearInterval(time.shift());
                            output('p1', 'time.shift(): ' + time + ', left: ' + left2);
                        }
                    }, 1));
                };            }
        </script>
    </head>

    <body>
        <div id="div1">
            <div id="div2"></div>
        </div>
        <hr />
        <p id="p1"></p>
    </body></html>
一段出入栈记录示例如下：
time.push() : 1, left: 19
time.push() : 1, left: 29
time.push() : 1, left: 39
time.push() : 1, left: 49
time.push() : 1,2, left: 59
time.push() : 1,2, left: 69
time.push() : 1,2, left: 79
time.push() : 1,2, left: 89
time.push() : 1,2,3, left: 99
time.push() : 1,2,3, left: 109
time.shift(): 2,3, left: 109
time.push() : 2,3, left: 119
time.shift(): 3, left: 119
time.push() : 3,4, left: 129
time.shift(): 4, left: 129
time.push() : 4, left: 139
time.shift(): , left: 139
time.push() : 5, left: 149
time.shift(): , left: 149
time.push() : 6, left: 159
time.shift(): , left: 159
可以看出，进栈的setInterval()都被弹出了，所以小块能停止移动。

调试易

事件队列，求助~！

解决方案 »