Question

有以下3个功能：

function A(){}

和

function B(){}

最后

function C(){}

它们都在一个名为main.js的文件中（main.js是包含该网站所有主要JavaScript函数的文件），它看起来像：

$(document).ready(function() { 
   function A(){}
   function B(){}
   function C(){}
});

好的，并且？ functionA & B只需要在“窗口大小调整和加载”上运行，当屏幕大小超过770px且低于1024px时。但是功能C不需要任何上述要求。

我是如何布局main.js以适应这些变化的？这是一个jsFiddle与我的脚本：http://jsfiddle.net/Z57Dh/

以下两个功能必须正常工作 - 即加载时...... //Prevent clicking on .active & disabled links和//Off-canvas menu

但//Show the side-by-side responsively只需在屏幕宽度低于770px时运行。

但是当宽度高于770px且低于1024px时，//Grid system必须运行

Answer 1

尝试这样做：

$(document).ready(function() { 
    function C(){}
});

$(window).on('load resize', function() {
    if($(window).height() > 770 && $(window).height() < 1024 {
        function A(){}
        function B(){}
    }
});

Answer 2

// define the functions ahead of time
var A = function () {console.log('a'); },
    B = function () {console.log('b'); },
    C = function () {console.log('c'); },
    AB = function() {
        var $window = $(window);

        // only run A and B if window is within boundaries
        if ($window.width() > 770 && $window.width() < 1024) {
            A();
            B();
        }
    };

// run functions when needed
$(function () {
    // run A and B on document ready
    AB();
    C();

    $(window).resize(function () {
        // run A and B when window resized
        AB();
    });;
});

布局我的main.js - 失败了

2 个答案: