'多線程'setInterval函數（Javascript）

Question

我的任務是創建一個進度條（實際上是一個看起來像進度條的計時器），該進度條將在click事件中觸發。 我需要多個條，因為一個人可能單擊會觸發進度條的多個元素。 這是我現在擁有的腳本：

function createPbar(IDofpBar, timeOut, timeIncrement ) {

            ...grab dom elements and do the math...

    i=0;
    var newWidth = 0;   

    var x = setInterval(function(){
        theBar.style.width = newWidth+"px"
        newWidth = newWidth + bIncrement;
        if (i == counter) {
            clearInterval(x);
        }
        i++
    }, timeIncrement*1000);

}

直到每次一次在頁面上顯示多個頁面時，此方法都可以正常工作。 當我觸發第二個時，它會影響第一個。 我猜這是由於每次觸發新進度條時都要重新分配變量。

有沒有辦法隔離每個調用的變量？

Answer 1

使用var可以在當前函數的范圍內而不是在全局范圍內聲明變量。 您在i=0;之前缺少var i=0; 聲明。 我看不到初始化theBar的代碼，但是您可能在那里也缺少var 。

function createPbar(IDofpBar, timeOut, timeIncrement ) {

    /* ...grab dom elements and do the math... */

    var theBar = ...,
        i=0,
        newWidth = 0;

    var x = setInterval(function(){
        theBar.style.width = newWidth+"px"
        newWidth = newWidth + bIncrement;
        if (i == counter) {
            clearInterval(x);
        }
        i++
    }, timeIncrement*1000);
}

以防萬一： var keyword @ MDC 。

Answer 2

馬特的回答是正確的，但我會進一步擴展。

在javascript中，在不使用var關鍵字的情況下分配變量會在全局范圍內創建變量。 在您當前的代碼中，這意味着進度條的所有實例都將引用並訪問i的相同實例。

通過使用var關鍵字在函數內部聲明變量，它聲明該變量具有局部范圍，並使其只能從函數內部訪問。 這使您可以擁有函數中使用的變量的獨立版本。

這是一個陷阱，當我忘記時，我經常發現自己不得不回去修理。