0

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

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

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

目前存在两个问题：

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

window.resize 函数的行为方式如下：

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

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

在这一点上我有点迷茫，但我尝试过使用

if ($.isFunction(window.mobileFunctions))

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

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

任何帮助将非常感激！

4

2 回答 2

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)
    });

});

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

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

于 2012-12-01T21:20:50.730 回答
1

您可以通过添加延迟来防止连续发射mobileCheck。使用 asetTimeout和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/

于 2012-12-01T21:00:35.823 回答