Question

我想知道，为什么我会根据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....
});

Answer 1

这与变量范围无关。它与变量值有关。在第二个和第三个示例中，您最初只显示$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。

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

1 个答案: