jquery - JavaScript 関数の実行が早すぎる

Question

以下の例でmyFonkは、 が即座に呼び出されます。クリック イベントを待機しません。なぜだめですか？

    function myFonk(info) {
        $("#result").html(info);
    }

    function getText(text) {
        return function () {
            myFonk(text);
        }
    }

    $(document).ready(function () {
        $("#b1").click(getText("getText"));
        $("#b2").click(myFonk("myFonk"));
    });

Answer 1

（）で関数名を書くときはいつでも、その関数を即座に呼び出すので myFonk("myFonk")、正しい方法ではありません。

次のように書いてください。

function myFonk(info) {
    $("#result").html(info);
}

function getText(text) {
    return function () {
        myFonk(text);
    }
}

$(document).ready(function () {
    $("#b1").click(getText("getText"));
    $("#b2").click(function () {
        myFonk("myFonk")
    });
});

Answer 2

これは、関数への参照を渡していないためです。関数を呼び出し、その結果をのイベントハンドラーとして使用していますclick。

これはあなたのためにそれを修正します...

function myFonk(info) {
    $("#result").html(info);
}

function getText(text){
    return function() {
        myFonk(text);
    }
}

$(document).ready(function() {
    $("#b1").click(function() {
        getText("getText")
    });
    $("#b2").click(function() {
        myFonk("myFonk")
    });
});

Answer 3

$(document).ready(function () {
    $("#b1").click(getText("getText"));
});

ここで行っているのは、関数getText("getText")を呼び出して、その呼び出しの結果を に渡すこと$("#b1").click()です。関数の結果を渡したくありません。あなたがしたいことは、関数自体を渡すことです。したがって、次のように書き換えます。

$(document).ready(function () {
    $("#b1").click(function() {
        return getText("getText");
    });
});

興味のある関数にパラメーターがない場合 (たとえば、関数hello()をパラメーターなしで呼び出したいとしましょう)、同じ方法で実行できます。

$(document).ready(function () {
    $("#b1").click(function() {
        return hello();
    });
});

...または単純化することもできます：

$(document).ready(function () {
    $("#b1").click(hello);
});

注：（hello関数自体）を渡しているのではなく、hello()（関数をすぐに実行して結果を関数に返しclick()ます。