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来声明当前函数范围内的变量，而不是全局范围内的变量。您在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关键字在函数内部声明变量，它声明变量具有局部范围，并且只能从函数中访问它。这允许您在函数中使用独立版本的变量。

这是一个陷阱，当我忘记时，我经常发现自己不得不回去修理。

'multithreading'setInterval函数（Javascript）

2 个答案: