Question

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

通过检查window.width，我只能在页面加载时提供正确的函数集，并且我想在window.resize上执行相同的操作。

我在这里设置了一个精简的小提琴：http://jsfiddle.net/b9XEj/

现在存在两个问题：

无论是否已加载，桌面功能或mobileFunction都会在页面调整大小时不断触发。
如果窗口调整大小超过一个断点，然后返回到先前的大小，则已经加载了错误的函数集，干扰了当前集。

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

检查当前为视口大小设置的正确功能集
如果是，请返回。
如果不是，请触发正确的功能集并删除不正确的功能集（如果存在）。

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

此时我有点失落，但我尝试使用

if ($.isFunction(window.mobileFunctions))

检查功能是否已经存在，但我似乎无法在不破坏整体功能的情况下使其工作。以下是该代码的小提琴：http://jsfiddle.net/nA8TB/

提前考虑，这种尝试也不会考虑是否存在不正确的功能集。所以，我真的希望有一种方法可以用更简单的方式来解决这个问题。

非常感谢任何帮助！

Answer 1

以下征服了2个问题。 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)
    });

});

DEMO：http://jsfiddle.net/b9XEj/1/

如果没有看到两组功能之间的真实世界差异，就很难提供如何阻止它们发生冲突的问题。一种可能性是检查函数中的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/

在响应式网站上分离桌面和移动jQuery功能

2 个答案: