Question

我正在尝试根据变量检查条件。长话短说：

一个。当用户调整窗口大小时，body_size变量即时更新。 //在其他帖子中对此进行了排序。

b。然后知道变量body_size我需要更新另一个变量：

如果body_size小于/大于/等于X（由我设置的值），则SlidesInView应自行更新。

默认SlidesInView为3。

一切都应该在飞行中发生。请参阅下面的代码段：

$(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

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

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

Answer 1

不要创建第二个resize事件处理程序。而是在每个调整大小时已执行的函数中更新slidesInView：setContainerWidth：

$(document).ready(function() {
  var body_size, resizeTimer, slidesInView;

  function setContainerWidth() {
    body_size = $('.container').width();
    slidesInView = body_size >= 980 ? 4 
                 : body_size >= 640 ? 3
                 :                    1;
  }

  $(window).resize(function() {
    clearTimeout(resizeTimer);
    resizeTimer = setTimeout(setContainerWidth, 200);
  });
  setContainerWidth();
});

一些评论：

=>是一个无效的比较运算符（它在arrow functions的上下文中有另一个含义）。请改用>=;
请勿使用第一个大写字母命名变量。通常的做法是只为类/构造函数名称而不是其他变量。
ternary operator（... ? .... : ...）非常适合您为slidesInView指定值的方式。
当您只调用setTimeout中的一个函数时，您可以将该函数作为setTimeout的第一个参数传递（确保不调用它，但是传递函数本身），就像我在上面的代码中所做的那样。

从另一个变量动态更新变量

1 个答案: