Javascriptがループを実行しすぎています

Question

JSで始まったばかりです。

私は、英語の単語をフランス語の単語に翻訳する必要がある簡単なアプリケーションを作成しています。私がしたいことは、divに英語の単語を表示することです。ユーザは、enterキーが押されたときに処理される入力にフランス語の単語を入力します。

私は2ページあり、Test2には以下のような英語とフランス語が含まれています。

yes,oui

他のページには、すべてのJSとHTMLが含まれています。私が遭遇している問題は、ユーザーが1単語を入力した後（この単語が正しいか間違っているか）、スクリプトは自動的に次の単語（すなわちno,non）に移動する必要があるということです。私は関数を作り、この関数をこの同じ関数の中で呼び出すことによってこれを試みました。何らかの理由で、最初の単語を入力した後でこれが間違っています（ユーザーは複数の単語を一度に尋ねられます）。誰もがこの問題を解決するか、解決するための考えを持っていますか？

<script> 
function getword(){ 
    var arr; 
    $.ajax({ type: "POST", async: false, url: 'Test2', success: function(data) { 
     arr = data.split (","); 
    }}); 
    return {or: arr[0], tr: arr[1]}; 
} 
function process(or, tr){ 
    if(tr == $("#translation").val()){ 
     return true; 
    }else{ 
     return false; 
    } 
} 
$(document).ready(function(){ 
    go(); 
    function go(){ 
    var data = getword(); 
    var or = data.or; 
    var tr = data.tr; 
    alert("Translate to French: " + or); 
    $("#translation").keypress(function(event) { 
     if (event.which == 13) { 
      if(process(or, tr)){ 
       alert('good'); 
       go(); 
      }else{ 
       alert('bad'); 
       go(); 
      } 
     } 
    }); 
    } 
}); 

</script> 
<div id="result"></div> 
<input type="text" placeholder="Antwoord" id="translation"/> 

Answer 1

goの各実行時にキーイベントハンドラを再割り当てしないでください。これらは累積的なので、しばらくするとそのキーイベントハンドラのトリガがロードされます。だから、go機能の外にそれを移動し、1レベルアップあなたの変数を宣言するので、彼らはイベントハンドラの範囲にとどまる：

$(document).ready(function(){ 
    var or, tr; // <!-- define here 
    go(); 
    function go(){ 
     var data = getword(); 
     or = data.or; 
     tr = data.tr; 
     alert("Translate to French: " + or); 
    } 

    $("#translation").keypress(function(event) { 
     if (event.which == 13) { 
      if(process(or, tr)){ 
       alert('good'); 
       go(); 
      }else{ 
       alert('bad'); 
       go(); 
      } 
     } 
    }); 
}); 

NB：alertを介してユーザと対話するために良い習慣と見なされていません。たとえば、div要素のように、ページにテキストを置くことを検討してください。