socket.on 事件在每次响应时都会重复多次
Posted
技术标签:
【中文标题】socket.on 事件在每次响应时都会重复多次【英文标题】：socket.on event is repeating itself more than one time with every response 【发布时间】：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 调用成功时，它都会绑定一个新的匿名函数副本。
【参考方案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 刷新函数中附加另一个匿名函数副本，这样我就不会多次获得你好？ @杰森以上是关于socket.on 事件在每次响应时都会重复多次的主要内容，如果未能解决你的问题，请参考以下文章
在Csharp中，我如何计算每次单击特定按钮时都会增加的某个值