2011-12-30 12 views
0

この関数は比較的簡単です。ボタンをクリックすると、オブジェクトが落ちます。もう一度ボタンを押すと、オブジェクトはランダムな位置に戻り、再び同じ速度で落ちます。 ボタンをクリックするたびに、(マージントップ)がはるかに高速になります。なぜ私は理解できないのですか?'jquery'を使用した関数の異常な動作

HTML

<button id="fall" onclick="show_up()"> random-fall </button> 
<div id="box" style="width:20px;height:20px;background:blue;"> </div> 

スクリプト

var top; 

function show_up() { 
     top = 0; 
     $("#box").css("margin-top", top); 
     var rand = Math.random() * 500; 
     rand = parseInt(rand); 

     $("#box").css("margin-left", rand); 

     fall_out(); 
    } 

function fall_out() { 
     top++; 
     if (top < 500) { 
      $("#box").css("margin-top", top); 
      window.setTimeout('fall_out()', 10); 
     } 
     else { 
      top = 0; 
      fall_out(); 

     } 
} 

誰も私にそれを解決するための最良の方法を教えてもらえますか?

+1

無限ループ内には「fall_out」はありませんか? topの値にかかわらず、あなたは 'fall_out'を呼び出し続けます。 – Eliasdx

+0

ちょうど注意してください:文字列を 'setTimeout'に渡すべきではありません(' eval'を使います)。関数を渡す必要があります。 'setTimeout(fall_out、10);' –

答えて

1

fall_out()は決してを停止しません。それは自分自身を呼び出すことになります。あなたのコメント@Joop Eggen's answerを読んだ後、それは望ましい動作であるようです。あなたが二度目show_up()を呼び出すと

fall_out()は再び秒無限ループにもたらされると呼ばれます。そのため、オブジェクトがより早く落ちる理由は、fall_out()が(2つの再帰的ループのため)最初より頻繁に呼び出されることになります。

show_up()に複数回入力しないでください。次のような変数を設定してください:

var top; 
var started = false; // fall_out() has not been called yet 

function show_up() { 
     top = 0; 
     $("#box").css("margin-top", top); 
     var rand = Math.random() * 500; 
     rand = parseInt(rand); 

     $("#box").css("margin-left", rand); 

     if(!started){ 
      started = true; //going to start the endless recursion function 
      fall_out(); 
     }    
} 

function fall_out() { 
     top++; 
     if (top < 500) { 
      $("#box").css("margin-top", top); 
      window.setTimeout(fall_out, 10); //note that it's not nice to call setTimeout with a string as argument 
     } 
     else { 
      top = 0; 
      fall_out(); 

     } 
} 
+0

素晴らしい!それは完璧に動作します.. 私は別の疑問を持っています。この関数をifの代わりにfor-loopで書くこともできます。はいの場合、どのようにすべての手順を見て遅くすることができますか? –

1

0それ以外の場合は再帰に設定fall_out()他のブランチの除去されなければならない、とマージントップへ最後の再帰呼び出しは無限大です。

+0

これは、ボックスが500px落ちると自動的に関数を呼び出し、落ちるようになります。 –

0

ランダム機能を使用しています。このスクリプトでは、x軸のランダムな位置にボックスを移動しています

+0

これはちょうど最初のものです。 –

関連する問題