Javascript運行循環太多

Question

介意我剛剛開始使用JS。

我正在寫一個簡單的應用程序，用戶需要將英語單詞翻譯成法語單詞。我想要做的是在div中顯示英文單詞。然後用戶在輸入法語單詞時按下enter鍵進行處理。

我有兩個頁面，Test2包含英文和法文單詞，如下所示。

yes,oui

其他頁面包含了所有的JS和HTML。我遇到的問題是用戶填寫完一個單詞後（這個單詞無論是正確的還是不正確的），腳本都應該自動移動到下一個單詞（即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功能，並聲明變量一個級別，所以他們留在範圍內的事件處理程序：

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

注意：它不是好的做法通過alert與用戶進行交互。考慮在頁面上放置文本，例如在div元素中。