js 计时器无法清除是为什么

Question

1.代码下方。简短说就是两个计时器让 div 向左或向右移动；两个button控制向左或向右的事件；当其中一个button按下时，设想让另一个button的计时器清除掉，通过function的形参判断是哪个button；

2.代码运行后没有按照设定想法实现，现象是 当div向左移动后，点击另一个button（即buttno）,结果div反复同时向左向右运动，函数中的清除计时器的代码没有起效；这是为什么？

function fun(flag) {
                var con1 = setInterval(function () {
                    if(flag == 1){
                        clearInterval(con2)
                        div1.style.left = div1.offsetLeft + 5+'px';
                    }
                },500);

                var con2 = setInterval(function () {
 
                    if(flag == 2) {
                        clearInterval(con1)
                        div1.style.left = div1.offsetLeft - 5+'px';
                    }
                },500);
        }

        butt.onclick = function () {
            fun(1)
        };
        buttno.onclick = function () {
          fun(2)
        };

3.另外我自己怀疑是不是作用域的原因，因为最开始我把if的判断是写在最外层的，包裹着两个计时器

if(flag == 2) {
              
                var con2 = setInterval(function () {
                    clearInterval(con1)
                    div1.style.left = div1.offsetLeft - 5+'px';
                },500);
            }

当时我把clearInterval（con1）写在 var con2 的前面 发现无法获取到con1 即我的编辑器显示con1为灰色字体，把clearInterval（con1）写在var con2下面时，编辑器即认可。所以这是为什么？两个问题哦~~~~

鉴于大家说只要点击一次就会生成计时器这个我能理解，那我就把最开始我写的贴上 （即用 if判断 包裹）

function fun(flag) {
            if(flag == 1){
                var con1 = setInterval(function () {
                    clearInterval(con2)
                    div1.style.left = div1.offsetLeft + 5+'px';
                },500);
            };

            if(flag == 2) {
                var con2 = setInterval(function () {
                    clearInterval(con1)
                    div1.style.left = div1.offsetLeft - 5+'px';
                },500);
            }
        }

        butt.onclick = function () {
            fun(1)
        };
        buttno.onclick = function () {
          fun(2)
        };

这种情况下依然无法清除计时器，这是为什么

Answer 1

你每次click一次，定时器都重新生成一个了，即原来的被覆盖了，怎么清掉呢。

function fun(flag) {
    var con1 = setInterval(function () {
        if(flag == 1){
            clearInterval(con2)
            div1.style.left = div1.offsetLeft + 5+'px';
        }
    },500);

    var con2 = setInterval(function () {
 
        if(flag == 2) {
            clearInterval(con1)
            div1.style.left = div1.offsetLeft - 5+'px';
        }
    },500);
}

butt.onclick = function () {
    fun(1)//点一下，con1 生成一个，
};
buttno.onclick = function () {
  fun(2)//点一下，con1 又生成一个，不一样的两个，
};

Answer 2

每次触发事件之后，先生成了两个定时器，定时器内部进行的判断。判断不影响定时器的生成。