socket.on 事件在每次响应时都会重复多次答案

【问题标题】：socket.on event is repeating itself more than one time with every responsesocket.on 事件在每次响应时都会重复多次
【发布时间】：2016-01-13 21:38:15
【问题描述】：

我已经设置了 socket.emit 成功 cooment 事件。但是当我绑定 sockets.on 事件时会出现问题。它被多次触发。

 $(document).on('click', '#comment_button', function() {
    $.ajax({
        // upon success
        success: function (response) {

            if (response) {
                socket.emit('postcomment');

                socket.on('refresh', function () {
                    console.log('refresh');
                  //This console.log('refresh') is coming multiple times. I mean its occurance increases with every successful ajax response.
                });
        }
    });
});

这是我的 server.js

socket.on('postcomment', function () {
        io.sockets.emit("refresh");
});

我已经验证在我的 server.js 中 socket.on 函数只被调用了一次。我不确定 ajax 中的 socket.on('refresh', function () {} 有什么问题。任何帮助都会很棒。

P.S 套接字连接已经建立。没问题。

编辑：我纠正了错误。如果将来有人读到这个。正如 jason 和 Niranjan 所提到的，socket.on{} 事件在成功响应后绑定了自己。简单地说：每次调用单击处理程序时，它都会将其他事件侦听器附加到套接字。您在之前的点击中附加的侦听器仍然处于活动状态。

所以我对之前的代码做了以下更改

 $(document).on('click', '#comment_button', function() {
    $.ajax({
        // upon success
        success: function (response) {

            if (response) {
                socket.emit('postcomment');

        }
    });
});

socket.on('refresh', function () {
    console.log('refresh');
});

编码愉快。

【问题讨论】：

您是否将函数的多个副本绑定到socket.on refresh 事件？
你什么时候调用ajax函数？？
不只有console.log('refresh');
没有响应兄弟，如果你调用ajax 20次，你的socket会重复20次。
我的意思是我认为这就是正在发生的事情......每次ajax 调用成功时，它都会绑定一个新的匿名函数副本。

标签： jquery node.js sockets

【解决方案1】：

我对之前的代码进行了以下更改。有效。

$(document).on('click', '#comment_button', function() {
    $.ajax({
        // upon success
        success: function (response) {

            if (response) {
                socket.emit('postcomment');

        }
    });
});

socket.on('refresh', function () {
    console.log('refresh');
});

socket.on{} 事件在成功响应后绑定自己。到很简单：每次调用点击处理程序时，它都会附加套接字的附加事件侦听器。您附加的听众之前的点击仍然有效。

【讨论】：

【解决方案2】：

我的感觉是，套接字工作正常。可能是，ajax() 被多次调用。

例如，您在点击某物时调用ajax()。并在成功时 socket.on('refresh') 被执行。所以现在，如果用户多次点击按钮，ajax 将被调用多次。这导致sockets() 上的重复

所以请确保不要多次调用 ajax。

你的问题解决了:)

【讨论】：

【解决方案3】：

每次ajax 请求成功时，您都会在socket.on refresh 函数中附加匿名函数的另一个副本。

我做了这个测试。如果我单击 ajax 按钮，然后单击“单击我”按钮，我会在控制台中得到一个“你好”。如果我再次单击 ajax 按钮然后单击“单击我”，我会得到两次“你好”。再次点击ajax，“点击我”打印“你好”三遍，等等

<!DOCTYPE html>

<html>
<script src="jquery-2.1.4.min.js"></script>
<script>

function send_ajax_request() {
    $.ajax("http://localhost/test.html").done(function() {
        console.log("ajax done");
        $("#clicker").click(function() {
            console.log("howdy");
        });
    });
}

</script>
</head>
<body>

<input type="button" value="ajax request" onclick="send_ajax_request()">
<input type="button" value="click me" id="clicker">
</body>
</html>

编辑：因此，如果您的目标只是为 socket.on refresh 事件设置一些行为，那么解决方案就是将该行为分配到 ajax 函数之外以及任何可能被多次调用的函数之外。

【讨论】：

那么我如何避免在 socket.on 刷新函数中附加另一个匿名函数副本，这样我就不会多次获得你好？ @杰森