Why the js timer cannot be cleared

1 . Under the code. In short, two timers make the div move left or right; two button control events to the left or right; when one button is pressed, imagine that the timer of the other button is cleared, and which button; is judged by the parameter of function

2 . After the code runs, it does not follow the set idea. The phenomenon is that when the div moves to the left, click on another button (that is, the buttno), result div moves to the left and right repeatedly, and the code of the clear timer in the function does not work; why?

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 . In addition, I doubt whether it is the reason for the scope, because at first I wrote the judgment of if in the outermost layer, wrapped in two timers

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

when I wrote clearInterval (con1) in front of var con2 and found that I could not get con1, that is, my editor showed that con1 was a gray font, and wrote clearInterval (con1) under var con2, the editor recognized it. So why is that? Two questions. Oh,

since I can understand that people say that a timer will be generated with just one click, I will post what I wrote at the beginning (that is, using if to judge the package)

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)
        };

the timer still cannot be cleared in this case, which is why

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 };