根据屏幕尺寸执行功能

Question

我需要根据屏幕尺寸和屏幕尺寸变化执行特定功能(响应)

那么就说我有3个功能(例如)

function red() {
    $('div').css('background','#B60C0C')
    .text('Screen Size RED');
    console.log('RED');
}

function orange() {
    $('div').css('background','#EBAE10')
    .text('Screen Size ORANGE');
    console.log('ORANGE');
}

function green() {
    $('div').css('background','#83ba2b')
    .text('Screen Size GREEN');
    console.log('GREEN');
}

当屏幕宽度尺寸为500px或更低时,我需要执行功能green()

并且功能橙色()当屏幕宽度大小为501px至850px时

并且当屏幕宽度大小为851px或更高时功能为红色()

我尝试使用resize(),但问题是在为每个像素重复执行相同功能时调整浏览器大小时执行该功能,这是一种非常糟糕的执行方式

我需要在突破屏幕宽度大小时执行该功能

准备在jsfiddle上使用代码http://jsfiddle.net/BaNRq/

Answer 1

咩; 这是一个解决方案.

您可以缓存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
});

小提琴:http://jsfiddle.net/BaNRq/3/

Answer 2

我实际上想把它作为对@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 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();

看看它在https://jsfiddle.net/BaNRq/16/

顺便说一句，这是答案实际上与@Vainglory07 减去 jQuery 相同