js调用函数，同一个函数穿不同参调用两次，只执行后一次

Question

问题描述

• 最近正在学习javascript，用的b站李立超老+师的教程视频，在132p中练习用定时器移动div的时候，突发奇想，想着试试把按钮和div一起移动，用右拐部分做了尝试，以下是全部代码

html代码：

<button id="btn_right">往右走</button>
<br>
<br>
<button id="btn_left">往左走</button>
<div id="one"></div>
<div id="line"></div>

css代码：

*{
    padding: 0;
    margin: 0;
}
#one{
    width: 100px;
    height: 100px;
    background-color: #eba;
    position: absolute;
    left: 0;
    top: 100px;
}
#line{
    width: 1px;
    height: 800px;
    background-color: rgb(114, 90, 81);
    position: absolute;
    left: 800px;
    top: 0;
}
button{
    position: absolute;
}

js代码：

//左右移动函数，参数direction：1、-1为向左，1为向右；2.需要移动的元素
    function move_lr(direction,obj){
        clearInterval(move);
        //定时器持续移动obj
        move = setInterval(function(){
            var oldValue = obj.offsetLeft;
            var newValue = oldValue + direction * 10;
            if(newValue <= 0){
                newValue = 0;
            }
            else if(newValue >= 800){
                newValue = 800;
            }
            obj.style.left = newValue +"px";
            if(newValue == 0 || newValue == 800){
                clearInterval(move);
            }
        },30);
    }
  //右拐
    function right_fun(){
        move_lr(1,one);
  //尝试把右拐按钮一同移动
        move_lr(1,btn_right);
    }
  //左拐
    function left_fun(){
        move_lr(-1,one);
    }
  //监听click行为绑定函数
    btn_right.addEventListener("click",right_fun,false);
    btn_left.addEventListener("click",left_fun,false);
}

问题代码

  //右拐
    function right_fun(){
        move_lr(1,one);
  //尝试把右拐按钮一同移动
        move_lr(1,btn_right);
    }

运行结果

• 期望结果：div和右拐按钮都右拐到800像素的位置
• 实际结果：只有右拐按钮走了，调换两行代码位置后就只有div走了；总结是谁在后面谁走，与期望不符

我的解答思路和尝试过的方法

1. 尝试过绑定两次监听click行为来调用函数，仍然是同样的结果
2. 声明两个右拐函数right_fun_one()和right_fun_btn_right()，也仍然是同样的结果
3. 感觉好像move_lr()只会在后一次使用的被调用

我想要达到的结果

想要实现两个元素都右拐的效果，以及为什么会出现这种情况

Answer 1

#####move_lr中已经清除掉计时器了，所以只有最后一个有效，
该分别用2个计时器变量来记录自己的计时器，改下面就可以了

<style>
    * {
        padding: 0;
        margin: 0;
    }

    #one {
        width: 100px;
        height: 100px;
        background-color: #eba;
        position: absolute;
        left: 0;
        top: 100px;
    }

    #line {
        width: 1px;
        height: 800px;
        background-color: rgb(114, 90, 81);
        position: absolute;
        left: 800px;
        top: 0;
    }

    button {
        position: absolute;
    }
</style>
<button id="btn_right">往右走</button>
<br>
<br>
<button id="btn_left">往左走</button>
<div id="one"></div>
<div id="line"></div>
<script>
    var move
    //左右移动函数，参数direction：1、-1为向左，1为向右；2.需要移动的元素
    function move_lr(direction, obj,timername) {
        clearInterval(window[timername]);////
        //定时器持续移动obj
        window[timername] = setInterval(function () {
            var oldValue = obj.offsetLeft;
            var newValue = oldValue + direction * 10;
            if (newValue <= 0) {
                newValue = 0;
            }
            else if (newValue >= 800) {
                newValue = 800;
            }
            obj.style.left = newValue + "px";
            if (newValue == 0 || newValue == 800) {
                clearInterval(window[timername]);
            }
        }, 30);
    }
    //右拐
    function right_fun() {
        move_lr(1, btn_right,'timer1');
        move_lr(1, one, 'timer2');
        //尝试把右拐按钮一同移动
    }
    //左拐
    function left_fun() {
        move_lr(-1, one);
    }
    //监听click行为绑定函数
    btn_right.addEventListener("click", right_fun, false);
    btn_left.addEventListener("click", left_fun, false);
</script>

有其他问题可以继续交流~