javascript - 当屏幕尺寸低于 X 像素时 jQuery 运行脚本

Question

当屏幕尺寸高于或低于某个点时，是否可以运行脚本，但仅限于该特定点？我有一个需要两个参数的函数，如果屏幕尺寸低于 769 像素，我希望更改这两个参数。所以我使用了经典的:

$( window ).resize(function() {
  if ($(window).width() < 769) {
     foobar(foo1, bar1);
  }
  else {
     foobar(foo2, bar2);
  } 
});

这可以工作，但是每次调整窗口大小时都会运行 foobar 。问题是，如果您将浏览器大小从例如 500 像素调整到 600 像素，我不希望执行该函数，因为这意味着如果您在智能手机上从纵向转到横向，它就会执行，我只希望它在它出现的那一刻执行低于或高于 768 像素。有任何想法吗？

Answer 1

您可以在全局变量中跟踪先前的宽度，然后检查新的和先前的宽度何时位于 768 的任一侧，这样您就知道您已经跨越了边界:

var prevWidth = null;

$(function(){
    prevWidth = $(window).width();
    console.log(prevWidth);
})

$(window).resize(function() {
    var newWidth = $(window).width();
    if(prevWidth <= 768 && newWidth > 768) {
        foobar(foo1, bar1);
    }
    else if (prevWidth > 768 && newWidth <= 768) {
        foobar(foo2, bar2);
    }

    prevWidth = newWidth;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

Fiddle