Javascript 运行循环太多

Question

请注意，我刚刚开始使用 JS。

我正在编写一个简单的应用程序，用户需要将英语单词翻译成法语单词。我想做的是在div中显示英文单词。然后，用户在按下 enter 键时在输入中输入法语单词。

我有两个页面，Test2 包含一个英语和法语单词，如下所示。

是的，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 元素中。