全局变量，如何避免它们

Question

我有一个使用setInterval()重复的动画change()功能：

function change(){ 
    interval = setInterval(c,300); 
    function c(){...} 
    c() 
} 

的c()功能做的工作。 我也有一个stop()功能停止所有动画，并恢复初始状态：

function stop(){ 
    clearInterval(interval); 
    ... 
}; 

我读过，是更好地利用var关键字，而不是声明一个全局变量。但是如果我这样做，我不能从stop()函数访问interval。声明interval以外的change()函数也给我一个问题。

好吧，我正在尝试本阿斯顿提出的最后一个解决方案。这里的代码：

function Animator() { 
    var id; 

    return { 
    start: start, 
    stop: stop, 
    }; 

    function start() { 
    id = requestAnimationFrame(go); 
    } 

    function stop() { 
    clearAnimationFrame(id); 
    } 

    function go() { 
    // increment the animation 
     for (var i=0;i<img.length;i++){ 
       var num = randNum(0,img.length-1) 
       var btn = img[i].nextSibling.nextSibling.childNodes[1] 
        img[i].setAttribute("src",img_path[num].path); 
         $(btn).css({"background-color":img_path[num].color,"border":"4px solid"+img_path[num].color}); 
         $(img[i]).animate({width: "-=80px", height: "-=80px"},'slow'); 
         $(img[i]).animate({width: "+=80px", height: "+=80px"},'slow')} 

      id = requestAnimationFrame(go) 
       } 


} 

基本上，当用户按下一个按钮时，图像开始改变其宽度和高度以及它们的颜色。 这是休息：

var animator = new Animator(); 

function stop(){ //fn related to the stop button 
    animator.stop()}; 


function change(){ //fn related to the start button 
    animator.start()} 

我不知道如何正确使用requestAnimationFrame，我现在研究它。但是当我按下开始按钮时，图像只会改变一次，然后停止。 在上面的代码我有一个for循环，所做的工作：

function change(){ 

    interval = setInterval(c,300); 
    function c(){ 
       for (var i=0;i<img.length;i++){ 
        var num = randNum(0,img.length-1) 
        var btn = img[i].nextSibling.nextSibling.childNodes[1] 
         img[i].setAttribute("src",img_path[num].path); 
          $(btn).css({"background-color":img_path[num].color,"border":"4px solid"+img_path[num].color}); 
          $(img[i]).animate({width: "-=80px", height: "-=80px"},'slow'); 
          $(img[i]).animate({width: "+=80px", height: "+=80px"},'slow')}} 
    c()} 

我承认我没有很清楚如何实现随时随地FUNC？ 感谢

编辑：现在的作品（我与其他文件:)工作），但我有问题，停止按钮

Answer 1

您可以使用封闭为好，这里阅读文档： https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures 用封你可以定义私人和公共职能。

Answer 2

在原始的JavaScript，你可以做到以下几点：

使用ES5：

function Animator() { 
    var id; 

    return { 
    start: start, 
    stop: stop, 
    }; 

    function start() { 
    id = requestAnimationFrame(go); 
    } 

    function stop() { 
    clearAnimationFrame(id); 
    } 

    function go() { 

    // increment the animation... 

    if(shouldContinue()) { // you define `shouldContinue` 
     id = requestAnimationFrame(go); 
    }  
    } 
} 

var animator = new Animator(); 
animator.start(); 
// ... 
animator.stop() 

Answer 3

使用Hi关闭，并与设定的时间间隔的东西正常工作：

var Button_Obj = function(){ 
    var intervalID; 

    function start(){ 
    return intervalID = setInterval(change,300) //change is the function that do the animation with a loop, i keep it private 
    }; 
function stop(){ 
    clearInterval(intervalID) 
    }; 
return {start : start, stop : stop} 

现在

全局空间我只有：

var btn_trigger = new Button_Obj(); 

，并在按钮标签我把：

<button style="border:1px solid #9dbbe4;" class="change-button" id="change-order" onclick="btn_trigger.start()" type="button">Start Moving</button> 

现在全球空间更加干净，这implmentation工作，使用requestAnimationFrame我有一些问题，但我会用它稍后重以及