'多線程​​'setInterval函數（Javascript）

Question

我負責創建將在點擊事件中觸發的進度條（實際上，看起來像進度條的計時器）。我需要多個酒吧，因爲人們可以點擊多個元素來觸發進度條。這是我現在的腳本：

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。我沒有看到初始化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關鍵字來聲明一個函數中的變量，它聲明的變量有局部範圍並使其只能從函數中訪問。這允許您在函數中使用獨立版本的變量。

這是我經常發現自己不得不回頭修理的時候忘記的問題。