javascript - 点击按钮 div移动。但第二次点击按钮div的移动速度会累加。求解

Question

点击按钮 p移动。但第二次点击按钮p的移动速度会累加。求解，代码如下。
http://jsbin.com/menozeyova/1/edit?html,js,output
在每次点击时我已经加了clearInterval。

Answer 1

因为timer是局部变量吧？运行之后就销毁了

Answer 2

把 var timer = null 移到 startMove() 外面就行了

javascriptwindow.onload = function() {
    var Obtn = document.getElementById("btn1");
    Obtn.onclick = function() {
        startMove();
    };

    var timer = null;

    function startMove() {
        var op = document.getElementById("p1");
        var iSpeed = 1;
        clearInterval(timer); //? 没有作用，第二次点击按钮后p还是会加速
        timer = setInterval(function() {
            if (op.offsetLeft >= 300) {
                clearInterval(timer);
            } else { //这里如果不加else，每次点击按钮时即使条件已经到达，还是会每点击一下按钮，p前进一个iSpeed。因为定时函数不会马上结束，要先把下方的语句执行。
                op.style.left = op.offsetLeft + iSpeed + 'px';
            }
        }, 30);
    }
};

Answer 3

你把timer放在函数内定义，每次点击按钮都会新定义一个timer。各个timer之间是独立的，互不影响。
把timer放在函数外定义，这样每次点击按钮操纵的是同一个timer。clearInterval才会生效。

Answer 4

setInterval 之前 clearInterval 一下。

Answer 5

就是局部变量的问题