javascript - 为什么当我在另一个函数完成后调用函数时,它会调用所有之前的函数?

标签 javascript jquery html css callback

我想制作基于控制台的文字游戏。当用户写下他的名字时,它应该调用一个带有年龄输入的函数,并且在年龄输入之后它应该调用性别输入。但是当我写下我的年龄时,它会再次调用 getAge + next 函数。在下一个函数之后,它调用 getAge + 下一个函数 + 下一个函数。我希望你知道,我的意思。我该如何解决?我尝试了回调,但没有用。

$(document).ready(function(){
    var Player = {
        username : "",
        age : null,
        sex : "",
        
    };
    
    function textArea($text){
       return $('#textArea').val($('#textArea').val() + $text);  
    };
    
    function clearInput(){
        return $('#inputs').val('');
    }
    
    var functions = {
        start : function start(){
            functions.getUsername();
        },
        //START GET USERNAME
        getUsername : function getUserName(callback){

            //Hello! Tell me your username!
            textArea("Vítej! Zadej svou přezdívku!");
    
            $('#inputs').keypress(function (e){
                if (e.which == 13){
                    Player.username = $('#inputs').val();
                    textArea("\n" + Player.username + "\n");
                    clearInput();
                    functions.getAge();
                }
            });
        },
        //END GET USERNAME
    
        //START GET AGE
        getAge : function getAge(){

            //Tell me your age!
            textArea("Zadej svůj věk!");
            
            $('#inputs').keypress(function (e){
                if (e.which == 13){
                    Player.age = $("#inputs").val();
                    textArea("\n" + Player.age + "\n");
                    clearInput();
                    functions.getSex();
                }
            });
        },
        //END GET AGE
        
        getSex : function getSex(){
 
            //Tell me your sex: male/female
            textArea("Zadej pohlaví: muž/žena");
            
            $('#inputs').keypress(function (e){
               if (e.which == 13){
                   Player.sex = $('#inputs').val();
                   textArea("\n" + Player.sex + "\n");
                   clearInput();
                   //Another function
               } 
            });
        }
    };
    
    functions.start();
});
#content>*{
    display: block;
    margin: 0 auto ;
}
#textArea{
    box-shadow: 2px 2px 2px grey;
    background: black;
    color: white;
}
#inputs{
    width: 61%;
    margin-top: 10px;
    background: black;
    color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
    <script src="script.js"></script>
</head>
<body>
    <div id="content">
        <textarea id="textArea" rows="30" cols="100"></textarea>    
        <input type="text" id="inputs">
    </div>
</body>
</html>

最佳答案

每个函数调用都会向您的文本区域添加一个keypress 监听器。所以在您的 getAge() 调用之后,您有 2 个监听器。因此,下一次按键将调用 getAgegetSex。因此,一种解决方案是在设置新监听器之前删除之前的监听器。

关于javascript - 为什么当我在另一个函数完成后调用函数时,它会调用所有之前的函数?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36534619/

相关文章:

asp.net-mvc - 使用 asp.net mvc/jquery 的全局 "ajax call"通知

javascript - Bootstrap datepicker 日期范围结束日期更新

html - 如何摆脱 Firefox 添加到 div 的 1px 宽度?

html - 如何在背景图像中应用视差

javascript - 无法将缓冲区写入 MongoDB GridFS

javascript - 将可折叠面板放在 ListView 中

javascript - 如何阻止第二个 onClick 事件触发?

javascript - 移动问题滑动(Iphone)

Javascript 更新进度条,然后切换可见的 div

javascript - Chrome 中的 GM_xmlhttpRequest?