setTimeoutとかsetIntervalのコールバック関数に自前の引数を渡したい

引数として渡される関数のこと。

他の関数の引数として渡して、他の関数の処理のタイミングで実行される関数。

こういうの

$('#alert-button').click(function (msg) {  // ←このfunctionが引数＝callback
    alert(msg);
});

とかこういうの　※コールバック関数を変数に入れて、引数として渡している

$('#alert-button').click(alertmsg); // ←このfunctionが引数＝callback

var alertmsg = function (msg) {
    alert(msg);
}

です。

setIntervalのコールバック引数に関数を渡そうとしてありがちなのが、実行結果を引数に渡してしまうこと。

こういう感じ

var msg = "Bad!";
var alertmsg = function (msg) {
    alert(msg);
}
setTimeout(alertmsg(msg),5000);

これだと、5秒後ではなくJS読み込みタイミング時にしか実行されない。

関数の横に括弧( )を入れると関数が実行されるため。

上記の書き方だとJSが読み込まれた段階でalertmsgが実行されてしまい、引数にはコールバック関数ではなく実行結果が渡っている形になる。

そのため、コールバックの関数に引数がない場合は

var msg = "Bad!";
var alertmsg = function (msg) {
    alert(msg);
}
setInterval(alertmsg,5000);

関数が引数として渡されているだけで、実行はされていない。実行タイミングはsetTimeoutに設定された時間になるため5秒後に実行される。

var message = "OK!";
var alertmsg = function (msg) {
    alert(msg);
}
setInterval(function () {
    alertmsg(message)
}, 5000);

var message = "OK!";
function alertmsg(msg){
    return function(){
        alert(msg);
    }
}
setInterval(alertmsg(message), 5000);

これでいけます。

学んだことのログ