JavaScript函數的變量作用域問題

我想用spin.js創建一個函數。該函數加載微調器，然後如果它被再次調用它的參數，則停止微調器。我無法獲得可變範圍。所以當我調用函數停止時，我在submitSpinner上得到了一個undefined。JavaScript函數的變量作用域問題

http://jsfiddle.net/atlchris/tQdZB/1/

function submitSpinner(stopSpinner) { 
    var theSubmitSpinner; 

    if (stopSpinner === true) { 
     theSubmitSpinner.stop(); 

     $('#overlay').remove(); 
    } 
    else { 
     $('body').append('<div id="overlay"><div id="spinner"></div></div>'); 

     theSubmitSpinner = new Spinner({ 
      lines: 13, 
      length: 15, 
      width: 5, 
      radius: 20, 
      color: '#ffffff', 
      speed: 1, 
      trail: 60, 
      shadow: false 
     }).spin(document.getElementById("spinner")); 
    } 
} 

submitSpinner(); 

$(function() { 
    $('#overlay').on('click', function() { 
     alert('click'); 
     submitSpinner(true); 
    }); 
});

來源

2012-07-23 ATLChris

爲什麼不從函數返回Spinner對象，並讓它的時間調用者調用.stop（）？讀得更好，並且不必用隨機變量污染局部範圍，也使得submitSpinner()更簡單。

function createSubmitSpinner() { 

    $('body').append('<div id="overlay"><div id="spinner"></div></div>'); 

    return new Spinner({ 
     lines: 13, 
     length: 15, 
     width: 5, 
     radius: 20, 
     color: '#ffffff', 
     speed: 1, 
     trail: 60, 
     shadow: false 
    }).spin(document.getElementById("spinner")); 
} 


$(function() { 
    var spinner = createSubmitSpinner(); 
    $('#overlay').on('click', function() { 
     alert('click'); 
     spinner.stop(); 
    }); 
});

來源

2012-07-23 13:17:21 complex857

這是一個很好的解決方案，雖然在* createSubmitSpinner內部創建元素並且事件處理程序被綁定在其外部，這仍然有點奇怪。但我想我們並沒有在這裏談論完美的代碼設計;） – 2012-07-23 13:20:06

好吧，我承認它確實如此。（ - ： – complex857 2012-07-23 13:40:11

問題是什麼？正如您已經知道這是一個範圍問題，只需將該變量聲明移到該函數外部以使其成爲全局變量並且可以從所有函數調用訪問。

然而，它可能會更好不使其全球性的，但移動停止功能（僅根據點擊處理程序調用）到同一個範圍：

function createSpinner() { 
    var overlay = $('<div id="overlay">'), 
     spinner = $('<div id="spinner">'); 
    $('body').append(overlay.append(spinner)); 
    var submitSpinner = new Spinner({ 
     lines: 13, 
     length: 15, 
     width: 5, 
     radius: 20, 
     color: '#ffffff', 
     speed: 1, 
     trail: 60, 
     shadow: false 
    }).spin(spinner); 

    overlay.on('click', function() { 
     submitSpinner.stop(); 
     overlay.remove(); 
    }); 
} 

$(function() { 
    createSpinner(); 
});

來源

2012-07-23 13:12:34 Bergi

移動「變種theSubmitSpinner; 「功能外：http://jsfiddle.net/nXbaz/

來源

2012-07-23 13:12:38 Piter

submitSpinner(true);

因爲你有你的一個範圍過載，所以你必須提供一個。

來源

2012-07-23 13:13:55

JavaScript函數的變量作用域問題

回答

相關問題