実用的なアプリケーションでwhileループを使用するのはこれが初めてなので、私の無知を許してください。
電球を使用した場合の経時的なコストを示す Web ページを作成しています。
この段階で、while ループを使用して、ユーザーが照明スイッチをクリックしてから経過した時間数を更新して表示しようとしています。(1 時間はリアルタイムの 1 秒を表します)
firebug にブレークポイントを設定すると、while ループ内で setTimeout メソッドに到達するまで、すべて正常に動作します。setTimeout メソッドで中断した後、続行をクリックすると、実際には他に何も実行せずに、すぐに同じ場所で中断します。
ブレークポイントを設定しないと、Firefox がフリーズし、スクリプトの実行を停止する必要があります。
setTimeout を適切に使用していることを再確認しました。何がうまくいかないのかわからないので、どこをチェックすればよいのか、何を検索すればよいのかさえわかりません。私がチェックまたは調査する可能性のあるもののほんのヒントでも、非常に役立ちます.
できるだけ詳細にコードをコメントしようとしました。必要に応じて何かを明確にさせていただきます。
jsfiddle を確認することを強くお勧めします。
しかし、ここに私のコードがあります:
私のJS
$(document).ready(function () {
//set image to default off position
$('#lightswitch').css("background-image", "url(http://www.austinlowery.com/graphics/offswitch.png)");
// setup the lifetime hours of the lightbulb for later use
var lifetimeHours = 0;
// setup function to update the calculated lifetime hours number on the webpage to
// be called later
function updateLifetimeHoursHtml (lifetimeHours) {
$('#lifetimeHours').html(lifetimeHours);
}
// set up function to to send to setTimeout
function updateNumbers () {
// increment lifetimeHours by one
lifetimeHours = lifetimeHours++;
// call function to update the webpage with the new number result
updateLifetimeHoursHtml(lifetimeHours);
}
// When the lightswitch on the webpage is clicked, the user should see the
// lifetime hours update every second until the user clicks the switch again
// which will then display the off graphic and pause the updating of the lifetime
// hours
$('#lightswitch').click(function(){
// if the lightswitch is off:
if ($('#lightswitch').attr('state') == 'off') {
// set switch to on
$('#lightswitch').attr('state', 'on');
// update graphic to reflect state change
$('#lightswitch').css("background-image", "url(http://austinlowery.com/graphics/onswitch.png)");
// start updating the lifetime hours number on the webpage
// while the #lightswitch div is in the on state:
while ($('#lightswitch').attr('state') == 'on'){
//call update numbers every second
setTimeout('updateNumbers()', 1000);
}
// the lightswich was not in the off state so it must be on
}else{
// change the state of the switch to off
$('#lightswitch').attr('state', 'off');
// update graphic to reflect state change
$('#lightswitch').css("background-image", "url(http://austinlowery.com/graphics/offswitch.png)");
};
});
});
私のHTML
<div id="container">
<div id="lightswitch" state="off"> </div>
<span>After </span><span id="lifetimehours">0</span><span> lifetime hours:</span>
<br><br>
<span><b>You have spent:</b></span>
<br><br>
<span id="dollaramoutelectricity"></span><span> on electricty</span>
<br>
<span id="mainttime"></span><span> on maintenace</span>
<br>
<span id="dollaramountbulbs"></span><span> on replacement bulbs</span>
<br><br>
<span><b>You have:</b></span>
<br><br>
<span>Produced </span><span id="amountgreenhousegasses"></span><span> of greenhouse gasses</span>
<br>
<span>Sent </span><span id="amounttrash"></span><span> of trash to the dump</span>
<br>
<span>Used </span><span id="amountelectricty"></span><span> of electricity</span>
</div>