Question

我想动态更新全局变量（窗口调整大小）。 body_size变量应该包含它下面的函数的结果。我确实理解该变量超出了范围，但是我不知道如何将它传递出去。请帮忙。请参阅下面的代码段。

＆＃13;

<div class="homepage">
    <img src="images/homepage.png" class="homepage">
    <ul>
        <li class="button"><a href="index.html" data-text="Home">Home</a></li>
        <li class="button"><a href="about.html" data-text="About">About</a></li>
        <li class="button"><a href="services.html" data-text="Services">Services</a></li>
        <li class="button"><a href="contact.html" data-text="Contact">Contact</a></li>
    </ul>
</div>

＆＃13;

$(document).ready(function() {

  var body_size; // this updates correctly

  var resizeTimer;

  function setContainerWidth() {
    body_size = $('.container').width();
  }

  $(window).resize(function() {

    clearTimeout(resizeTimer);
    resizeTimer = setTimeout(function() {

      setContainerWidth();
     

    }, 200);

  });
  setContainerWidth();
  console.log(body_size);

  var SlidesInView = 3; // this should update depending on result below :
  $(window).on('resize', function() {
    setContainerWidth(); // to check width on resize?
    if (body_size => 980) {
      SlidesInView = 4; // change SlidesInView above if condition is met.
    } else if (body_size <= 640) {
      SlidesInView = 1; //change SlidesInView above if condition is met.
    }
  });

  console.log(SlidesInView);
  }); // doc ready

＆＃13;

.container{
  height:100vh;
  width:100vw;
  background:red;
}

＆＃13;

基本上，当用户调整窗口大小时，top变量body_size应该使用值更新自身。

Answer 1

变量body_size仅在窗口调整大小事件时被分配，而在console.log执行时最初未定义。

我已修改它以分配负载。

＆＃13;

$(document).ready(function() {

    var body_size; // this should hold the value of function below. This should get updates on window resize.

    var resizeTimer;
  
    function setContainerWidth() {
      body_size = $('.container').width(); 
    }
  
    $(window).resize(function() {

      clearTimeout(resizeTimer);
      resizeTimer = setTimeout(function() {

        setContainerWidth(); 
        console.log(body_size); //retrieves actual width.

      }, 200);

    });
  
    setContainerWidth();
    console.log(body_size); //retrieves undefined, which means that body_size at the top is not updating.
  }); // doc ready

＆＃13;

.container{
  height:100vh;
  width:100vw;
  background:red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<div class="container">
</div>

＆＃13;

Answer 2

让我们澄清一下情况：

body_size不是顶级的，因为它位于$(document).ready(function() {/*...*/});内部如果您想将其设置为顶级，请将其从function中删除并将其声明为它
您声明的body_size是您在事件中更新的变量，因为没有变量具有相同的名称遮蔽它，因此您假设它未更新且不同你在活动中使用的那个是错误的。
console.log输出错误的值会在resize window之前执行，因为script之前正在执行。

要确保您了解事物的运作方式，请尝试以下脚本：

  var body_size; // this should hold the value of function below. This should get updates on window resize.
  $(document).ready(function() {

    var resizeTimer;
    $(window).resize(function() {

      clearTimeout(resizeTimer);
      resizeTimer = setTimeout(function() {

        body_size = $('.container').width(); 

      }, 200);

    });
  }); // doc ready

打开页面和开发工具。调整window的大小，然后将其粘贴到控制台中：

console.log(body_size); //retrieves actual width.

瞧！ body_size已更新！

使用窗口调整大小Jquery上的函数结果更新变量

2 个答案: