'jquery'を使用した関数の異常な動作

Question

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

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(); 

     } 
} 

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

Answer 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(); 

     } 
} 

Answer 2

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

Answer 3

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