javascript - 根据屏幕尺寸执行功能

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 时调用 orange()

当屏幕宽度大于或等于 851px 时，函数 red()

我尝试使用 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
});

fiddle :http://jsfiddle.net/BaNRq/3/