为什么当我为聊天应用程序提交表单时，输出会乘以我提交的次数

Question

我第一次输入东西后点击提交，出现了一个li，很好。但是当我第二次点击它时，输出打印了 2 次，打印了 3 次，打印了 3 次，依此类推。为什么？我只想让它在每次点击时打印一次。

客户：

var socket = io()
    var name;
    var msg;
    $("#nameForm").on("submit", function(e){
        var name = $(".nameInput").val()
        socket.emit("heres name", name);
        socket.on("outputName", function(data){
            name = data;
            $(".messages").append("<li>" + name +"</li>")
            // $("#nameForm").fadeOut()
        })
        e.preventDefault();
    })

html:

<div class="chatArea">
    <ul class="messages"></ul>
</div>
<form id = "nameForm">
    <input type="text" class="nameInput"><button>Enter Name</button>
</form>
<form id = "msgForm">
    <input class="msgInput" type= "text"></input><button>Enter message</button>
</form>
<script src ="http://code.jquery.com/jquery-2.1.1.js"></script>
<script src="https://cdn.socket.io/socket.io-1.2.0.js"></script>

index.js:

var express = require("express")
var app = express();
var server = require("http").createServer(app);
var io = require("socket.io")(server);

var port = process.env.PORT || 8080;

server.listen(port, function(){
    console.log("server is listening on port %d", port)
})

app.use(express.static(__dirname + "/public"));

var usernames = {};
var numUsers = 0;
var msg;

io.on("connection", function(socket){
    var addedUser = false;

socket.on("heres name", function(username){
    ++numUsers;
    addedUser = true
    usernames.username = username
    socket.emit("outputName", usernames.username)
})



})

Answer 1

您必须在单击时阻止提交按钮并等待响应并在响应时解锁该按钮。

var socket = io()
var name;
var msg;
$("#nameForm").on("submit", function(e){
    $("#nameForm input[type='submit']").disable();
    var name = $(".nameInput").val()
    socket.emit("heres name", name);
    socket.on("outputName", function(data){
        name = data;
        $(".messages").append("<li>" + name +"</li>");
        $("#nameForm input[type='submit']").enable();
        // $("#nameForm").fadeOut()
    })
    e.preventDefault();
})

不要忘记在行尾加上分号！

更新：

var socket = io();
var name;
var msg;
socket.on("outputName", function(data){
    name = data;
    $(".messages").append("<li>" + name +"</li>");
    $("#nameForm input[type='submit']").enable();
})
$("#nameForm").on("submit", function(e){
    $("#nameForm input[type='submit']").disable();
    var name = $(".nameInput").val();
    socket.emit("heres name", name);
    e.preventDefault();
})

为什么当我为聊天应用程序提交表单时，输出会乘以我提交的次数

Why when i submit a form for chat app the output comes multiplied by the amount of times i submitted

javascript

jquery

chat

socket.io