全局變量，如何避免它們

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我有一些問題，但我會用它稍後重以及