js 計時器無法清除是為什么

1.代碼下方。簡短說就是兩個計時器讓 div 向左或向右移動；兩個button控制向左或向右的事件；當其中一個button按下時，設(shè)想讓另一個button的計時器清除掉，通過function的形參判斷是哪個button；

2.代碼運行后沒有按照設(shè)定想法實現(xiàn)，現(xiàn)象是當div向左移動后，點擊另一個button（即buttno）,結(jié)果div反復同時向左向右運動，函數(shù)中的清除計時器的代碼沒有起效；這是為什么？

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 的前面發(fā)現(xiàn)無法獲取到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)
        };

這種情況下依然無法清除計時器，這是為什么

回答

編輯回答

淡墨

你每次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 又生成一個，不一樣的兩個，
};

2018年8月2日 07:24

編輯回答