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

nb：通过alert与用户互动并不是很好的做法。考虑将文本放在页面上，例如在div元素中。