2016-04-02 13 views
1

私のウェブサイトに時計を挿入するために、以下のコードをオンラインで見つけました。 startTime()関数の最後の行で、変数tが宣言されています。しかし、t内のコードは呼び出されずに起動するように見えます(これは、時計がサイト内で完全に機能するために明らかです)。呼び出されることなく変数内のコードが呼び出されますか?

なぜ、このコードが動作していますか?

私はそれらの機能が割り当て時に火が、呼び出される必要がないことを変数としての機能を割り当てることから知っています。私はまた、setTimeoutをtに代入せずに以下のコードを試してみました。それを変数に割り当てる点は何ですか?

私はので、私はここで何が起こっているかを理解する助けとなる任意の説明は素晴らしいことだJavaScriptに新たなんです。

ありがとうございます!

コード:

function startTime() { 
    var today = new Date(); 
    var h = today.getHours(); 
    var m = today.getMinutes(); 
    var s = today.getSeconds(); 
    m = checkTime(m); 
    s = checkTime(s); 
    document.getElementById('timeLink').innerHTML = "Time: " + 
    h + ":" + m + ":" + s; 
    var t = setTimeout(startTime, 500); 
} 
function checkTime(i) { 
    if (i < 10) {i = "0" + i}; // add zero in front of numbers < 10 
    return i; 
+0

't内のコードは、呼び出されないと呼び出されます。' 'startTime()'は呼び出されていません。 –

+2

おそらく、あなたが '' innerHTML''を設定したいのであれば '' innerHTML''ではなく '' innerText''を設定したいと思うでしょう。 '' innerHTML''を設定するには、 '' document.getElementById ( 'timeLink')。innerHTML = "

hi

" "。 – Ismail

+4

@hamism '.innerText'は標準ではないため、すべてのブラウザで動作するわけではありません。 '.innerHTML'は、文字列に(その名前にもかかわらず)HTMLを必要としません。 –

答えて

0

あなたは変数を割り当てるhttps://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setTimeoutは、右側が評価されますし、その評価結果を変数に入れています。

だから、あなたが書く場合:

var a = 5 + 6; 

その後インタプリタは、5 + 6を評価する11の結果を取得し、同じ機能のために行く数11

に割り当てられます。あなたが書く場合:

function someFunction() { 
    return 9; 
} 
var x = someFunction(); 

インタプリタがsomeFunctionを評価します、これは同様にあなたの例では適用され、関数を呼び出す9の結果を取得し、9

に変数を割り当てます。

var t = setTimeout(startTime, 500); 

インタプリタはます

  1. は次に
  2. ある結果を得る(500ミリ秒待機し、その後のstartTimeを呼び出す)機能
  3. を呼び出す、setTimeout(startTime, 500)、右側の評価しますタイマーのID
  4. このIDをtに割り当てます。

しかし、それは常にnullの値を持っており、それが使用されることはありませんので、あなたが実際に、変数tを必要としませんでした。関数の最後にはsetTimeout(startTime, 500);と書くだけで、まったく同じことができます。

概要

機能は、実際に割り当て時に火を行いますので、彼らは、変数に代入された値を返すように評価することができます。

それをクリアしたことを願っています!

+0

'setTimeout()'と 'setInterval()'は、タイマーの特定のインスタンスを表す数値を返します。彼らはいつも持っている。この戻り値は 'clearTimeout()'または 'clearInterval()'を使ってタイマーを停止させたい場合にはESSENTIALです。 https://developer.mozilla。org/en-US/docs/Web/API/WindowTimers/setTimeoutさらに、関数は代入時に起動しません。関数はJavaScriptのDATAです。関数に変数を代入すると、その変数に関数が格納されます。あなたの答えのほとんどは間違っています。 –

+0

実際の戻り値を見るにはhttps://jsfiddle.net/34s2g1f4/6/を参照してください。 –

+0

私はなぜこれらのタイマーがブラウザ間で標準化されていないと話し続けているのか分かりません。彼らです。最近のすべてのブラウザで同じように動作します。私が提供したMozillaのリンクを読んでください。あなたの答えはまだほとんど間違っています。 –

2

この行:

var t = setTimeout(startTime, 500); 

は、500ミリ秒の遅延の後に、startTime関数が呼び出されるべきであることを意味します。このコードはstartTimeの内部にあるので、関数は再帰的になります。 t変数には、タイマーの特定のインスタンスを表す数値が入力されます。これは、あなたがclearTimeout()機能を使用して、タイマーをキャンセルしたい場合...あなたはこのように、キャンセルしたいタイマーへの参照を渡すだろう、後で使用することができます。

clearTimeout(t); 

は、このを見てみましょうちなみにhttps://jsfiddle.net/34s2g1f4/6/

、はるかに単純化されたクロックコードは次のようになります:

window.addEventListener("DOMContentLoaded", function(){ 

    var timeLink = document.getElementById('timeLink'); 
    var t = null; 

    // The parenthesis around this function make it a function 
    // expression and the extra set of parenthesis at the end 
    // cause the function to invoke itself. This syntax is also 
    // known as an "Immediately Invoked Function Expression" 
    (function startTime() { 
     timeLink.innerHTML = "Time: " + new Date().toLocaleTimeString(); 
     t = setTimeout(startTime, 900); 
    }()); 

}); 

このコードは、すべての900ミリ秒の時間を更新し、のではなく、すべての500ミリ秒setTimeout()によって返された実際の値を参照するにはフィドルonds(したがって、それは自分自身を半分近くの頻度で呼び出しますが、それでも時間は正確です)。

setTimeout()機能は、「1回限り」のタイマーを作成します。タイマーがオフになった後、供給関数の参照が呼び出されると、それはそれの終わりですが、タイマーがオフになる最初の時間の後に、それは再び現在の関数を呼び出すように、あなたのケースで供給される関数のリファレンスは、setTimeout()が含まれている機能です別の「ワンタイム」タイマーが設定されるなどの問題があります。ある関数がそれ自身を呼び出すとき、それは「再帰関数」と呼ばれます。

、ユーザーが指定する間隔で繰り返しその機能を呼び出す繰り返しタイマーを作成setInterval()を、使用することです。この動作を取得する別の方法。それは次のようになります。

window.addEventListener("DOMContentLoaded", function(){ 
    var timeLink = document.getElementById('timeLink'); 

    // Here, the call to start the timer is outside of the function 
    // so startTime will not be recursive, it will just be called 
    // repeatedly every 9/10's of a second. 
    var t = setInterval(startTime, 900); 
}); 

function startTime() { 
    timeLink.innerHTML = "Time: " + new Date().toLocaleTimeString(); 
} 

受け入れ答えが言うにもかかわらず(それはほとんどが間違っている)、setTimeout()setInterval()は標準化され、いくつかの時間のためにしています。 From:

enter image description here

0

setTimeout()が呼び出され、戻り値がvar tに割り当てられます。このインスタンスの戻り値は、setTimeoutのこのインスタンスに固有のIDです。

関連する問題