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

Javascript运行循环太多了

1 个答案: