web-dev-qa-db-ja.com

setTimeout関数にパラメータを渡す方法

私はjavascriptに比較的慣れていません。 10から1に達するまでカウントダウンを開始する簡単なカウンタープログラムを作成しました。

  <script type="text/javascript">
    function countDown(secs) {
        var element = document.getElementById("status");
        element.innerHTML = "Please wait for "+secs+" seconds";
        if(secs < 1) {
            clearTimeout(timer);
            element.innerHTML = '<h2>Countdown Complete!</h2>';
            element.innerHTML += '<a href="#">Click here now</a>';
        }
        secs--;
 --->       **var timer = setTimeout('countDown('secs')',1000);**
    }
    </script>
    <div id="status"></div>
    <script type="text/javascript">countDown(10);</script>

次に、パラメータを'+secs+'としてcountDown関数に渡してみました。

var timer = setTimeout('countDown('+secs+')',1000);

上記の変更は機能します。

私の質問は、なぜパラメータを「秒」だけでなく「+秒+」として渡す必要があるのですか？どんな違いがあるの？

javascriptsettimeout
6
v09

使用する

var timer = setTimeout(function(){
        countDown(secs)
    },1000);

または

var timer = setTimeout('countDown('  + secs + ')',1000);

あなたの場合、問題は+記号のない変数で文字列連結を使用していたことでした（私の2番目の例）と構文エラーが発生します

10
Arun P Johny

最初の試みはシナックスエラーです：

var timer = setTimeout('countDown('secs')',1000);

文字列をsetTimeoutに渡そうとしていますが（最初は悪い考えです）、文字列を正しく作成していません。

Word secsを囲む一重引用符はエスケープされないため、実際には文字列リテラルcountDown(、変数secs、文字列リテラル)の順に渡します。文字列間に演算子がないため、これは無効な構文です。

ただし、+シンボルを使用する場合は、3つの文字列を一緒に追加して、必要なメソッド呼び出しを作成します（the+演算子はJavaScriptで文字列を連結するために使用されます）：

'countDown(' + 'secs' + ')' ===  'countDown(secs)'

一緒に追加された3つの文字列は、有効なJavaScriptを含む文字列を作成するため、setTimeout（）関数に渡すことができます。

can文字列をsetTimeout（）に渡しますが、より良いアプローチは関数参照を渡すことです。

これは通常、次のような無名関数を使用して行われます。

setTimeout(function () {
    countDown(secs);
}, 1000);

パラメータを渡す必要がない場合は、次のようにすることができます。

function countDown() {
    alert("10... 9... 8...");
}

setTimeout(countDown, 1000);

関数参照が変数として指定されている場合は、()シンボルを使用しないことに注意してください。 JavaScriptの関数の後に括弧を使用すると、関数が呼び出されます。

9
jahroy

setTimeoutを使用してそれを行う簡単な方法：

setTimeout(FunctionName,delay,arg1,arg2....);

あなたの場合、あなたは単にそのようにすることができます：

setTimeout(countDown,1000,secs);

私はこのリンクを提案します： http://javascript.info/settimeout-setinterval

3
senior

Aaditは正しい考えを持っていました。ループ内で複数のタイムアウトを開始する必要があり、それらはすべて変数が同じ値に設定されてしまいました。これは、非同期でうまく機能する唯一の方法がAaditのものである理由を説明するフィドルです。

http://jsfiddle.net/85fmwew4/

for(i=0;i<10;i++){
    setTimeout(function(){bad(i)}, 1000)    // bad for async
    setTimeout(good, 1000, i)               // good for async
}
1
Chris Kochel

次のようにデクリメントを実行するには、クロージャーを記述します。

_if (secs < 1) {
    element.innerHTML = '<h2>Countdown Complete!</h2>';
    element.innerHTML += '<a href="#">Click here now</a>';
} else {
    // wait 1 second
    setTimeout(function() {
        countDown(secs - 1); // decrement and run ourselves again
    }, 1000);
}
_

また、単純なelse条件を優先して、clearTimeout()を削除しました。

1
Ja͢ck

setTimeout関数を使用すると、追加のパラメーターを関数に渡すことができます。したがって、次のようにコードを書き直すことができます。

var timer = setTimeout(countDown, 1000, secs);

一部の古いバージョンのIEを除き、すべての主要なブラウザでサポートされています。詳細については、この質問を参照してください： nderscore.jsに遅延関数があるのはなぜですか？

1
Aadit M Shah

これは私のために働いた唯一のものです（node.jsのsetTimeoutに変数を渡します）：

setTimeout(function(teamNum,zeroBase,position) {
    spawnAI(roomIndex, 'scout', teamNum, position);
}, timeToSpawn,teamNum,zeroBase,position);
0
Chris Scott

最近のブラウザでの最近のJavaScriptの最適化により、次のことが簡単にできます。

var timer = setTimeout( countDown( secs ) , 1000 );

0
Damilola Olowookere