在调整大小时将全局javascript变量传递到jquery插件

我正在创建一个mobile first responsive web站点，它有一些定制的jquery插件，可以在某些断点处启动

首先是代码片段，然后我会解释这个问题

CSS:

@media (min-width: 20em) {
  html:after {
    content: "320";
     } }
@media (min-width: 25em) {
  html:after {
    content: "400";
     } }
@media (min-width: 30em) {
  html:after {
    content: "480";
     } }

全球JS

var FOO = {
 mq: function() {
   return  parseInt(window.getComputedStyle(document.documentElement,':after').getPropertyValue('content').replace(/['"]/g,''),10);                     
 }
}

JQUERY插件1

this.init = function()
{
 $(window).on("load resize orientationchange", function() {
   if(FOO.mq() >= 480) {
      DO SOMETHING
   }
});
};

JQUERY插件2

this.init = function()
{
 $(window).on("load resize orientationchange", function() {
   if(FOO.mq() >= 560) {
      DO SOMETHING ELSE
   }
});
};

现在，将FOO.mq（）放在jquery插件中的问题是，它将为找到的每个DOM对象启动FOO.mq（）函数（例如，如果插件对10个图像执行了某些操作，它将启动FF.mq（）10次），而实际上这并不需要，因为我们只需要检查一次

我曾尝试将resize/return值放入一个全局对象中，但它似乎不起作用，并被jquery插件接受

任何指点都将不胜感激

谢谢

尝试使用超时：

this.init = function () {
    var timeout;
    $(window).on("load resize orientationchange", function () {
        clearTimeout(timeout);
        timeout = setTimeout(function(){
           if (FOO.mq() >= 480) {
               DO SOMETHING
           }
        },15);//even 0 should be enough
    });
};

---

假设此计算值仅在文档加载时或窗口更改布局时更改：

var FOO = FOO || {};      // create global namespace obj, if required
$(function() {
    var mq;               // scoped variable

    // catch events that might change the @media CSS rules
    $(window).on("load resize orientationchange", function() {
        mq = parseInt(window.getComputedStyle(document.documentElement,':after').getPropertyValue('content').replace(/['"]/g,''),10);
    });

    FOO.mq = function() { // function that just returns the scoped variable
        return mq;
    }
});

---

你想知道，你在什么地方犯了个错误。您的事件仅绑定到

窗口

，除非您有相同类型的事件冒泡，您不能让

FOO.mq（）

计算一次（以及每当相关事件发生时）而不是按需计算它的内容吗？@moonwave99我会检查一下out@Alnitak这就是我试图做的，但如果我放了一个console.log，它就无法工作（FOO.mq（））除此之外，我得到了一个“TypeError:FOO.mq不是函数”错误。有什么想法吗？我可以看到你正在尝试做什么，我认为这个想法很好。在调用document.ready处理程序之前，你将无法调用

FOO.mq

。这一定是因为js在启动窗口加载之前启动了（这为变量提供了一个值）是的，我相信是的。我不记得在什么时候可以可靠地调用

window.getComputedStyle（）

，但无论发生什么情况，都需要确保在调用此函数之前不要尝试使用

FOO.mq（）

。