setInterval()やsetTimeout()に引数ありの関数を指定する

setInterval()やsetTimeout()に引数ありの関数を使う
1. 普通に引数を指定する
2. 引数の与え方の正解は

setInterval()やsetTimeout()に引数ありの関数を使う

Javascriptでタイマーを実現する際に良く利用する
setInterval()やsetTimeout()。

この関数の呼出し形式は「setTimeout( “関数名()”,待ち時間 );」なので

setTimeout( callBackFunc,1000 ) ;

のようになります。

ここでちょっと問題になるのは「callBackFunc()」に
引数がある場合。
普通に書くとエラーになります。

普通に引数を指定する

普通に考えると関数に引数を指定するので、素直に
「callBackFunc()」に引数を指定。

setTimeout(
    timerFunction( Date().toLocaleString());
   ,500 ) ;

こんな感じでしょうか。

でもこの指定ではスクリプトエラーになり動作しません。

引数の与え方の正解は

「callBackFunc()」に引数の与え方の正解は

setTimeout(
    function()
    {
        timerFunction( Date().toLocaleString());
    }
    ,500 ) ;

と無名関数を利用します。
なるほど。

ということでボタンを押下すると現在時刻を引数としたタイマーを起動し、
STOPが押下されるまで現在時刻を引数としたタイマーを起動し続ける
サンプルを作成して見ました。

<script language="JavaScript">
    var stop_flg = false ;

    function    timerControl()
    {
        if( document.getElementById( "timer_btn" ).value == "start" ){
            stop_flg = false ;
            document.getElementById( "timer_btn" ).value = "stop" ;
            setTimeout(
                function()
                {
                    timerFunction( Date().toLocaleString());
                }
                ,500 ) ;
        }
        else{
            document.getElementById( "timer_btn" ).value = "start" ;
            stop_flg = true ;
        }
    }

    function timerFunction( date_str )
    {
        if( stop_flg == false ){
            document.getElementById( "dps_date" ).value = date_str ;
            setTimeout(
                function()
                {
                    timerFunction( Date().toLocaleString());
                }
                ,500 ) ;
    }
}
</script>
</head>
<body>
    <INPUT type="text" id="dps_date" value = "" size="60"><INPUT type="button" id="timer_btn" value="start" onClick="timerControl()">
</body>

こんな感じになります。