関数の呼び出し、実行を制御したい

Question

###前提・実現したいこと
関数を画面幅に応じて追加、または削除したい。

###発生している問題・エラーメッセージ
イベントはonやoffを使えば実行を制御できますが、
例えばウィンドウサイズが640pxより大きい場合のみ
navDisplay();という関数を実行したいのですが、
下記ですと、リサイズして640px以下になったとき
リサイズ前に呼び出されているので、
navDisplay();は実行されてしまうと思われます。

###ソースコード

//スマホとpc 関数切り替え
$(window).on("load resize",
function() {
    if ($(this).width() > breakP && is_sp != false) {
        // ウィンドウサイズが640超過かつ
        // 現在の表示がsp用表示の場合(または初回)に呼び出される
        navDisplay();
        pcNavAction()；
    }
    else if ($(this).width() < breakP && is_sp != true) {
        // ウィンドウサイズが640以下かつ
        // 現在の表示がpc用表示の場合(または初回)に呼び出される
        spNavAction();
    }
}
);
function navDisplay() {
    $nav.attr('style', '');
    if($body.hasClass("is-open")) {
        $body.removeClass("is-open");
    }
}
;

勉強不足ですみませんが、よろしくお願いいたします。

Comments

[think49]

shi_ue さんの回答で解決可能に思われますが、レスを付けられない理由が何かあるのでしょうか。

[退会済みユーザー]

ご指摘のほどありがとうございました。
私の確認不足によるもので、大変反省しております。
今後、このようなことがないよう注意していきたいと思います。

Answer 1

elseifのところがおかしいですね。
resizeイベントはresize中繰り返し出てしまうので、繰り返し出てもおかしくないようなfunctionの作りが必要です。

$(window).on("load resize",
function() {
    if ($(this).width() > breakP && is_sp != false) {
        // ウィンドウサイズが640超過かつ
        // 現在の表示がsp用表示の場合(または初回)に呼び出される
        navDisplay();
        pcNavAction()；
    }
    //else if ($(this).width() < breakP && is_sp != true) {
    else if ($(this).width() <= breakP && is_sp == true) {
        // ウィンドウサイズが640以下かつ
        // 現在の表示がpc用表示の場合(または初回)に呼び出される
        spNavAction();
    }
}
);

Comments

[退会済みユーザー]

返事が大変遅くなってしまい、大変申し訳ありません。
質問内容がとても不適切であったのにも関わらず、
問題点を的確に指摘していただきありがとうございました。
関数の作り方から見直していきたいと思います。

Answer 2

後から関数を追加、削除することはできません。
また、実現したい内容についての説明が不足しています。
まずは、下の３項目を整理してください。

・幅が640px以下のとき何をするのか
・幅が640pxを越えたとき何をするのか
・リサイズしたときはどう動かしたいのか

Comments

[退会済みユーザー]

返事が大変遅くなってしまい、大変申し訳ありません。
質問内容がとても不適切であったことを反省しております。
今後、このようなことがないよう十分注意するように心がけてまいります。

Answer 3

もし、必要でもないのにブラウザを超えてOSの値にアクセスできるスクリプトがWEBブラウザで動作するとしたら、それは恐ろしいことだとは思いませんか？

Comments

[退会済みユーザー]

あれ？　質問内容が違うかな？　すいません、金曜夜なのですでによっぱ…

[退会済みユーザー]

どうも質問内容がおかしいようです。

> 例えばウィンドウサイズが640pxのときだけ
> navDisplay();という関数を実行したいのですが、

なら、

if ($(this).width() === 640)

ですし、

>リサイズして640px以下になったとき

は

else if ($(this).width() <= 640)

ですし、

なんというか、全体的に日本語がアレです。

[退会済みユーザー]

大変申し訳ありませんでした。
「ウィンドウサイズが640pxのときだけ」は間違いで「ウィンドウサイズが640pxより大きい場合」が正しいです。
ご指摘していただきありがとうございます。