jQuery，不同的函数输出取决于 var 范围答案

【问题标题】：jQuery, different function output depending on var scopejQuery，不同的函数输出取决于 var 范围
【发布时间】：2016-02-23 18:04:02
【问题描述】：

我想知道，为什么我会面临两种不同的行为模式，具体取决于 var 范围？第一个做得很好，动态显示浏览器的窗口宽度：

  $( window ).resize(function() {
      var $winWidth = $(window).width();
      $('#stop p').remove();
      $( "#stop" ).prepend( "<p>Actual window width: " + $winWidth + "</p>" );
    });

第二个和第三个只显示一个固定大小，窗口最初是从这个大小调整大小的：

    var $winWidth = $(window).width();   
$( window ).resize(function() {
  $('#stop p').remove();
  $( "#stop" ).prepend( "<p>Actual window width: " + $winWidth + "</p>" );
});

第三个：

 $(function(){
 var $winWidth = $(window).width();   
$( window ).resize(function() {
  $('#stop p').remove();
  $( "#stop" ).prepend( "<p>Actual window width: " + $winWidth + "</p>" );
});
 });

我期待所有这些情况都具有相同的行为，摘录全局范围 var（第二个）可以被文档中的任何函数使用，而 jQuery 范围（第三个）可以被内部的任何函数使用

$(function(){
// Do something....
});

【问题讨论】：

标签： jquery scope

【解决方案1】：

这与变量作用域无关。它与变量value有关。在您的第二个和第三个示例中，您只在页面最初显示时设置了$winWidth 变量一次。稍后调整大小时，您将使用旧值而不是当前值。

要在调整大小时使用宽度，您必须在resize 处理程序内部设置变量的值。该变量的范围是什么无关紧要。也就是说，所有这些工作：

// 1. This works
$( window ).resize(function() {
    var $winWidth = $(window).width();
    $('#stop p').remove();
    $( "#stop" ).prepend( "<p>Actual window width: " + $winWidth + "</p>" );
});

// 2. So does this
var $winWidth;
$( window ).resize(function() {
    $winWidth = $(window).width();   
    $('#stop p').remove();
    $( "#stop" ).prepend( "<p>Actual window width: " + $winWidth + "</p>" );
}); 

// 3. So does this
$(function(){
    var $winWidth;
    $( window ).resize(function() {
        $winWidth = $(window).width();   
        $('#stop p').remove();
        $( "#stop" ).prepend( "<p>Actual window width: " + $winWidth + "</p>" );
    });
});

如您所见，范围并不是使其工作/不工作的原因。当我们设置了使它工作/不工作的值。

也就是说，您应该始终尽可能缩小变量的范围，这将支持#1。

【讨论】：

非常感谢，我知道了。