0

デスクトップレイアウトとモバイルレイアウト用の特定のjQuery関数のセットを備えたレスポンシブサイトで作業しています。両方が同時にアクティブである場合、それらは互いに干渉します。

window.widthをチェックすることで、ページの読み込み時に正しい関数のセットのみを提供できます。window.resizeでも同じことを実行したいと思います。

私はここにいる場所の簡略化されたフィドルを設定しました：http：//jsfiddle.net/b9XEj/

現在、 2つの問題があります。

  1. desktopFunctionsまたはmobileFunctionsは、すでにロードされているかどうかに関係なく、ページのサイズ変更時に継続的に起動します。
  2. ウィンドウのサイズが1つのブレークポイントを超えて変更されてから前のサイズに戻された場合、誤った関数のセットがすでにロードされており、現在のセットに干渉しています。

window.resize関数は、次のように動作する必要があります。

  1. ビューポートサイズに対して現在アクティブな関数の正しいセットがあるかどうかを確認します
  2. はいの場合、戻ります。
  3. いいえの場合、正しい関数のセットを起動し、正しくない関数のセットが存在する場合は削除します。

上記のフィドルの例では、「モバイル機能がアクティブです」または「デスクトップ機能がアクティブです」のいずれかを表示する1行が常に表示されます。

この時点で少し迷っていますが、使ってみました

if ($.isFunction(window.mobileFunctions))

関数がすでに存在するかどうかを確認しますが、関数全体を壊さずに機能させることはできないようです。そのコードのフィドルは次のとおりです：http：//jsfiddle.net/nA8TB/

先を考えると、この試みでは、誤った関数のセットがすでに存在するかどうかも考慮されません。ですから、これをもっと簡単に処理して、両方の問題を解決できる方法があることを本当に望んでいます。

どんな助けでも大歓迎です！

4

2 に答える 2

2

以下は2つの問題を克服します。1resize秒間に何度も起動するため、タイムアウトを使用すると、コードが常に起動するように修正されます。また、同じサイズが有効かどうかを確認するチェックを追加し、有効な場合は戻ります

$(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つの関数セットの間に実際の違いが見られない限り、それらの競合を防ぐ方法についてのガイダンスを提供することは困難です。windowType1つの可能性は、関数をチェックインすることです

于 2012-12-01T21:20:50.730 に答える
1

遅延を追加することで、連続発火を防ぐことができますmobileCheck。ブール値setTimeoutとともにaを使用します。checkPending

var checkPending = false;

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

ここを参照してください：http：//jsfiddle.net/2Q3pT/

編集

2番目の要件に関しては、このパターンを使用して既存のパターンを作成または使用できます。

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

参照： http： //jsfiddle.net/2Q3pT/2/

于 2012-12-01T21:00:35.823 に答える