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函数的变量作用域问题

回答

相关问题