Javascript 根据屏幕大小执行函数

我需要根据屏幕大小和屏幕大小变化执行特定功能（响应）

假设我有3个函数（例如）

当屏幕宽度小于等于500px时，我需要执行函数green（）

当屏幕宽度大小从501px到850px时

当屏幕宽度为851px或更大时，函数为red（）

我尝试使用resize（），但问题是在为每个像素调整浏览器大小时执行该函数，重复执行相同的函数，这是一种非常糟糕的执行方法

当断开屏幕宽度大小的点时，我需要执行该功能

---

在jsField

上使用的代码。如果你在谈论监视器的分辨率设置，考虑一下，例如我使用的是<代码> 1280×1024 < /代码>，所以我的报告

window.screen.height; // 1024
window.screen.width;  // 1280

您还可以使用

avail

前缀忽略任务栏之类的内容。如果您只想计算出浏览器的可见区域，那么可以在

文档元素

上使用and，即

document.documentElement.clientWidth;  // 1263 (the scrollbar eats up some)
document.documentElement.clientHeight; //  581 (lots lost here, e.g. to console)

---

至于你的火灾太频繁的问题，引入一个速率限制器，例如

function rateLimit(fn, rate, notQueueable) {
    var caninvoke = true, queable = !notQueueable,
        ready, limiter,
        queue = false, args, ctx;
    notQueueable = null;
    ready = function () { // invokes queued function or permits new invocation
        var a, c;
        if (queable && queue) {
            a = args; c = ctx;
            args = ctx = null; queue = false; // allow function to queue itself
            fn.apply(c, a);
            setTimeout(ready, rate); // wait again
        } else
            caninvoke = true;
    }
    limiter = function () { // invokes function or queues function
        if (caninvoke) {
            caninvoke = false;
            fn.apply(this, arguments);
            setTimeout(ready, rate); // wait for ready again
        } else
            args = arguments, ctx = this, queue = true;
    };
    return limiter;
}

var myRateLimitedFunction = rateLimit(
    function () {console.log('foo');},
    2e3 // 2 seconds
);
myRateLimitedFunction(); // logged
myRateLimitedFunction(); // logged after rate limit reached

---

使用javascript，您可以获得屏幕大小的值。从中，您可以调用自定义函数以获得所需的内容

 //function for screen resize
 function screen_resize() {
        var h = parseInt(window.innerHeight);
        var w = parseInt(window.innerWidth);

        if(w <= 500) {
            //max-width 500px
            // actions here...
            red();
        } else if(w > 500 && w <=850) {
            //max-width 850px
            // actions here...
            orange();
        } else {
            // 850px and beyond
            // actions here...
            green();
        }

    }

在resize上，只需调用函数，也可以在page.ready state上自动调用函数

    // auto fire the responsive function so that when the user
    // visits your website in a mall resolution it will adjust
    // to specific/suitable function you want
    $(document).ready(function(e) {
        screen_resize();
    });

尝试在此处检查输出：

---

希望这有帮助。

Meh；这里有一个解决方案

只有在发生更改时，才能缓存决定调用函数的lastBoundry

// define the boundries
var bounds = [
    {min:0,max:500,func:red},
    {min:501,max:850,func:orange},
    {min:851,func:green}
];

// define a resize function. use a closure for the lastBoundry determined.
var resizeFn = function(){
    var lastBoundry; // cache the last boundry used
    return function(){
        var width = window.innerWidth; // get the window's inner width
        var boundry, min, max;
        for(var i=0; i<bounds.length; i++){
            boundry = bounds[i];
            min = boundry.min || Number.MIN_VALUE;
            max = boundry.max || Number.MAX_VALUE;
            if(width > min && width < max 
               && lastBoundry !== boundry){
                lastBoundry = boundry;
                return boundry.func.call(boundry);            
            }
        }
    }
};
$(window).resize(resizeFn()); // bind the resize event handler
$(document).ready(function(){
    $(window).trigger('resize'); // on load, init the lastBoundry
});

//定义边界
变量界限=[
{min:0，max:500，func:red}，
{min:501，max:850，func:orange}，
{min:851，func:green}
];
//定义一个调整大小的函数。对最后确定的边界使用闭包。
var resizeFn=函数（）{
var lastbundry；//缓存最后使用的边界
返回函数（）{
var width=window.innerWidth；//获取窗口的内部宽度
变量边界，最小值，最大值；
对于（变量i=0；i最小值和宽度<最大值
&&lastBoundry！==boundry）{
lastBoundry=boundry；
返回boundry.funct.call（boundry）；
}
}
}
};
$（窗口）。调整大小（resizeFn（））；//绑定调整大小事件处理程序
$（文档）.ready（函数（）{
$（window）.trigger（'resize'）；//加载时，初始化lastBoundry
});

---

Fiddle:

我其实想把这句话作为对@Nirvana Tikku答案的评论，但是我不能，因为我没有50个声誉，所以我会在这里评论+我会添加一个我自己的解决方案，这样答案空间就不会被浪费

评论： 我很抱歉（也许）“破坏了聚会”，但要么是我没有正确回答OP的问题，要么是我误解了解决方案。 以下是我认为OP想要的：一种基于屏幕大小和动态执行函数的方法，无需对每个像素重复执行函数。 在给定的解决方案中，虽然一开始很难看到，但函数确实对每个像素执行。尝试将console.log（'aaaa'）放在返回函数行之间，如下所示：

    return function(){
 console.log('aaaa')
        var width = window.innerWidth; // get the window's inner width

运行该函数，然后点击F12按钮（在Firefox中）并调整窗口大小，您将看到它在整个调整大小的时间内都会弹出（抱歉，也无法上传图像-没有足够的重复）

我花了一整天的时间试图自己复制这个解决方案， 这样，我就可以根据屏幕大小执行一个函数，但不必“监听”沿途的每个像素

到目前为止，这似乎是不可能的（除非读到这篇文章的人有一个解决方案），同时这是我的代码，它的复杂性要小得多

解决方案：

var宽度=[0500850]；
函数resizeFn（）{
if（window.innerWidth>=宽度[0]&&window.innerWidth=宽度[1]&&window.InnerWidths看起来您正在更新样式。为什么不使用
媒体查询
？我们有不真实的JavaScript函数吗？@Jim正确的方法是使用媒体查询…特别是对于响应性设计媒体查询，您应该查看。我认为这是重复的：@todd我认为不是..只有一个问题是t当为每个像素调整浏览器大小时，重复执行相同的功能，检查这里的选项，调整浏览器大小，看看发生了什么好吧，我只是告诉你我的想法：）选择或使用什么取决于你。修改以满足你真正想要实现的目标？谢谢@Jim。我已经用.resize（）达到了相同的结果但这是我的代码的主要问题，请查看我上面问题的结尾，谢谢你的时间：）@Vainglory07当我阅读问题时，我认为关键是
我试图使用resize（）但问题是在为每个像素调整浏览器大小时执行该功能。重复执行相同的功能，这是一种非常糟糕的执行方式
——即，
如何使每个像素更改后的功能不启动？
，只是它在末尾被隐藏了。因此，我的答案中有一大块速率限制代码正在生成一个函数，我希望它能满足OP的要求。我正在努力理解和弄清楚如何使用代码，并且还在尝试。对不起，我是Javascript的新手：$@Jim
rateLimit
是一个返回函数的函数。返回的函数是特殊包装中的第一个参数
fn
。T第二个参数
rate
指定在允许调用函数之间等待的最小毫秒数。第三个参数
notQueueable
是可选的，如果在最短等待时间到期之前尝试调用函数，则禁用函数在最短等待时间到期后立即调用自身的功能我知道它排队的能力让它看起来更复杂，但我想确保你的r的最后一个像素
// define the boundries
var bounds = [
    {min:0,max:500,func:red},
    {min:501,max:850,func:orange},
    {min:851,func:green}
];

// define a resize function. use a closure for the lastBoundry determined.
var resizeFn = function(){
    var lastBoundry; // cache the last boundry used
    return function(){
        var width = window.innerWidth; // get the window's inner width
        var boundry, min, max;
        for(var i=0; i<bounds.length; i++){
            boundry = bounds[i];
            min = boundry.min || Number.MIN_VALUE;
            max = boundry.max || Number.MAX_VALUE;
            if(width > min && width < max 
               && lastBoundry !== boundry){
                lastBoundry = boundry;
                return boundry.func.call(boundry);            
            }
        }
    }
};
$(window).resize(resizeFn()); // bind the resize event handler
$(document).ready(function(){
    $(window).trigger('resize'); // on load, init the lastBoundry
});

    return function(){
 console.log('aaaa')
        var width = window.innerWidth; // get the window's inner width

var widths = [0, 500, 850];

function resizeFn() {
if (window.innerWidth>=widths[0] && window.innerWidth<widths[1]) {
red();
} else if (window.innerWidth>=widths[1] && window.innerWidth<widths[2]) {
orange();
} else {
green();
}
}
window.onresize = resizeFn;
resizeFn();