JS里定时器发生冲突怎么结局?谢谢了

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<style type="text/css">
    #A{height:120px; width:1000px; background:#ccc; position:relative; left:0; top:0; margin:auto; margin-top:50px;}
    #B{height:100px; width:100px; background:red; position:absolute; left:0; top:20px;}
    input{width:50px; height:40px; margin-right:20px;}
    .ma{width:400px; margin:auto; margin-top:50px;}

</style>
<body>
<div id="A">
    <div id="B" style="left:0px;"></div>
</div>
<div class="ma">
    <input value="到达0"   type="button" onclick="show(0)"/>
    <input value="到达300" type="button" onclick="show(1)"/>
    <input value="到达600" type="button" onclick="show(2)"/>
    <input value="到达900" type="button" onclick="show(3)"/>
</div>
</body>
<script>
    var tt=document.getElementById('B').style.left;
    var timer=null;
    function right(jc){
        tt=parseInt(tt)+30;
        if(tt>=(jc*300)){
            tt=(jc*300);
            window.clearInterval(timer);
        }
        document.getElementById('B').style.left=tt+'px';
    }
    function left(jc){
        tt=parseInt(tt)-30;
        if(tt<=(jc*300)){
            tt=(jc*300);
            window.clearInterval(timer);
        }
        document.getElementById('B').style.left=tt+'px';
    }
    function show(jc){
        if(parseInt(tt)<(jc*300)){
            timer=window.setInterval(function (){right(jc)},30);
        }else if(parseInt(tt)>(jc*300)) {
            timer = window.setInterval(function () {left(jc)}, 30);
        }
    }
</script>
</html>

点击"到达900",定时器开始运行,盒子B慢慢的向右滑,在这个定时器还没结束的时候
点击其他的按钮,这样就冲突了,
怎样才能让定时器运行的时候,点击其他的定时器它不受影响

我这代码实在是传不上去，不太会用。html部分被屏蔽掉了。html部分改动的内容是为每个button添加一个class=“button”

启动定时器的时候禁用按钮，或者加上一个全局变量，定时器在执行的时候通过它判断下是否允许执行。

启动定时器的时候，disbaled其他按钮

<!DOCTYPE html>

#A{height:120px; width:1000px; background:#ccc; position:relative; left:0; top:0; margin:auto; margin-top:50px;} #B{height:100px; width:100px; background:red; position:absolute; left:0; top:20px;} input{width:50px; height:40px; margin-right:20px;} .ma{width:400px; margin:auto; margin-top:50px;}

拷贝过去用beyond compare 对比一下看看我都加了哪些内容。思路就是在点击按钮的时候禁用所有按钮，在方块到达指定的位置后取消所有按钮的禁用，希望能帮助到你

<!DOCTYPE html>