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

当屏幕尺寸大于或小于某个特定点时（仅在该特定点上），是否可以运行脚本？我有一个需要两个参数的函数，如果屏幕尺寸低于769像素，我想更改这两个参数。所以我用了经典的：

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

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

最佳答案

您可以在全局变量中跟踪先前的宽度，然后检查新宽度和先前宽度何时在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