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

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)

};

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