在响应式网站上分离桌面和移动 jQuery 函数

Question

我正在开发一个响应式站点，该站点具有一组特定的 jQuery 函数，用于桌面布局和移动布局。如果它们同时处于活动状态，它们会相互干扰。

通过检查 window.width，我能够在页面加载时只提供正确的功能集，我想在 window.resize 上做同样的事情。

我已经设置了一个精简的 Fiddle，我在这里：http://jsfiddle.net/b9XEj/

目前存在两个问题：

1. desktopFunctions 或 mobileFunctions 将在页面调整大小时持续触发，无论它们是否已加载。
2. 如果窗口的大小调整到超过一个断点，然后返回到之前的大小，则已经加载了不正确的函数集，从而干扰了当前集。

window.resize 函数应该以下列方式运行：

1. 检查当前是否针对视口大小激活了正确的函数集
2. 如果是，请返回。
3. 如果不是，则触发正确的函数集并删除不正确的函数集（如果存在）。

在上面的 Fiddle 示例中，您总是会看到一行，显示“移动功能处于活动状态”或“桌面功能处于活动状态”。

此时我有点迷茫，但我尝试过使用

if ($.isFunction(window.mobileFunctions)) 

检查功能是否已经存在，但如果不破坏整体功能，我似乎无法让它工作。这是该代码的小提琴：http://jsfiddle.net/nA8TB/

提前考虑，这种尝试也不会考虑是否已经存在不正确的函数集。所以，我真的希望有一种方法可以更简单地处理这个问题并解决这两个问题。

任何帮助将不胜感激！

Answer 1

以下解决了其中的两个问题。 resize 每秒触发多次，因此使用超时将修复它不断触发您的代码。它还添加了一个检查以查看是否相同的大小有效，如果是则返回

$(document).ready(function() {

    var windowType;
    var $wind = $(window);

    var desktopFunctions = function() {
        $('body').append('<p>Desktop functions are active</p>');
    }

    var mobileFunctions = function() {
        $('body').append('<p>Mobile Functions are active</p>');
    }

    var mobileCheck = function() {
        var window_w = $wind.width();
        var currType = window_w < 940 ? 'mobile' :'desktop';

        if (windowType == currType) {
            $('body').append('<p>No Type Change, Width= '+window_w+'</p>');
            return;
        } else {
            windowType = currType;
        }

        if (windowType == 'mobile') {                
            mobileFunctions();
        } else {
            desktopFunctions();
        }
    }

    mobileCheck();
    var resizeTimer;

    $wind.resize(function() {
        if (resizeTimer) {
            clearTimeout(resizeTimer);
        }

        resizeTimer = setTimeout(mobileCheck, 300)
    });

});

演示：http://jsfiddle.net/b9XEj/1/

如果没有看到您的 2 组函数之间存在一些现实世界的差异，就很难就如何阻止它们发生冲突提供指导。一种可能性是检查函数中的windowType

Answer 2

您可以通过添加延迟mobileCheck 来防止连续触发。使用 setTimeout 和 checkPending 布尔值。

var checkPending = false;

$(window).resize(function(){
    if (checkPending === false) {
        checkPending = true;
        setTimeout(mobileCheck, 1000);
    }
});

请看这里：http://jsfiddle.net/2Q3pT/

编辑

至于第二个要求，您可以使用此模式来创建或使用现有的：

mobileFunctions = mobileFunctions || function() {
    // mobile functions active
};

见：http://jsfiddle.net/2Q3pT/2/