javascript - setInterval 函数中的变量增量器

Question

我在函数方面遇到很多问题，并且对变量作用域感到困惑。我尝试使用回调函数，但无法获取它。

我有一个用 css 为背景设置动画的功能。当我在 setInterval 运行时第二次单击时，我需要该函数不会将增量器变量重新启动为 0。 看到当你在html的time1或time2中点击两次时，计数器的顺序不保持顺序。

function movie(elm,jumpPx,spriteHeight,duration){
var inc=0;
var time=setInterval(function(){

    if(inc<spriteHeight){
        inc+=jumpPx;
        //elm.style.backgroundPosition='0px -'+inc+'px';
        elm.innerHTML=inc;
    }else{
        clearInterval(time);
        elm.style.backgroundPosition='0px -0px';          
    }
},duration);  

}

<p onclick="movie(this,1,1000,1000)">time1</p>
<p onclick="movie(this,1,1000,1000)">time2</p>

Answer 1

您的变量声明位于函数内:

function movie(elm,jumpPx,spriteHeight,duration){
    var inc=0;
    ... other code ...
}

因此，每次调用该函数时，都会将 'inc' 重置为 0。

var inc = 0;
function movie(elm,jumpPx,spriteHeight,duration){
    ... other code ...
}

如果将其移到函数之外，它不会继续重置