js中的全局變量，如何避免它們

Question

我有一個change()函數，該函數使用setInterval()重復動畫：

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

c()函數可以完成工作。 我還有一個stop()函數，該函數停止所有動畫並恢復初始狀態：

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

我讀過，最好使用var關鍵字而不是聲明一個全局變量。 但是，如果這樣做，我將無法從stop()函數訪問interval 。 在change()函數之外聲明interval也給我一個問題。

好的，我正在嘗試本·阿斯頓提出的最后一個解決方案。 這里的代碼：

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()}

我承認我還不太清楚如何實現go func？ 謝謝

編輯：現在工作（我正在使用另一個文件:)），但我有停止按鈕的問題

Answer 1

您也可以使用Closure，在此處閱讀文檔： https : //developer.mozilla.org/en-US/docs/Web/JavaScript/Closures使用Closure，您可以定義私有和公共功能。

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

嗨，使用閉包並設置間隔可以正常工作：

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>

現在全局空間更干凈了，這種實現有效，使用RequestAnimationFrame時我遇到了一些問題，但是稍后我也會嘗試使用它