Menu
I have set socket.emit event upon successful cooment. But the problem occurs when i bind sockets.on event. It is getting fired multiple times.
$(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.
});
}
});
});
Here is my server.js
socket.on('postcomment', function () {
io.sockets.emit("refresh");
});
I have verified that in my server.js socket.on function is called for only one time.
I am not sure what is the problem with socket.on('refresh', function () {} in ajax.
Any help will be great.
P.S socket connection is already made. No problem in that.
EDIT: I rectified the mistake. If anyone is reading this in future. As jason and Niranjan mentioned,
socket.on{}event was binding themselves upon successful response. To be simple: Every time the click handler is called, it attaches additional event listeners to the socket. The listeners you attached on the previous clicks remain active.
so i made the following changes wrt to previous code
$(document).on('click', '#comment_button', function() {
$.ajax({
// upon success
success: function (response) {
if (response) {
socket.emit('postcomment');
}
});
});
socket.on('refresh', function () {
console.log('refresh');
});
Happy coding.
885
i made the following changes wrt to previous code. It Worked.
$(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{} event was binding themselves upon successful response. To be simple: Every time the click handler is called, it attaches additional event listeners to the socket. The listeners you attached on the previous clicks remain active.
84
What i feel is, sockets are working fine. May be, ajax() is getting called multiple times.
For example, you are calling ajax() on click of something. and on success socket.on('refresh') gets executed. So now, if the user is clicking multiple times on button, ajax will be called that many times. This leads to repetation on sockets()
So make sure that, you dont call the ajax multiple times.
Your issue is solved:)
32
You're attaching another copy of the anonymous function inside of the socket.on refresh function every time an ajax request succeeds.
I made this test. If I click the ajax button and then click the "click me" button, I get one "howdy" in the console. If I click the ajax button again then click "click me", I get "howdy" twice. Click ajax again, "click me" prints "howdy" three times, etc.
<!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>
Edit:
So the solution, if your goal is simply to set up some behavior for the socket.on refresh event, is to assign that behavior outside of the ajax function and outside of any function that may be called multiple times.
23
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
