2015-10-15 9 views
5

Ich habe socket.emit Ereignis nach erfolgreichen cooment festgelegt. Aber das Problem tritt auf, wenn ich sockets.on-Ereignis binde. Es wird mehrfach gefeuert.socket.on Ereignis wiederholt sich mehr als einmal mit jeder Antwort

$(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. 
       }); 
     } 
    }); 
}); 

Hier ist meine server.js

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

ich vergewissert haben, dass in meiner server.js socket.on Funktion nur einmal aufgerufen wird. Ich bin mir nicht sicher, was das Problem mit socket.on('refresh', function() {} in Ajax ist. Jede Hilfe wird groß sein.

Die Socketverbindung ist bereits hergestellt. Kein Problem darin.

EDIT: Ich habe den Fehler behoben. Wenn jemand das in Zukunft liest. Wie Jason und Niranjan erwähnt, socket.on{} Ereignis wurde bei erfolgreicher Antwort verbindlich. Um einfach zu sein: Jedes Mal, wenn der Click-Handler aufgerufen wird, werden zusätzliche Ereignis-Listener an den Socket angehängt. Die Listener, die Sie bei den vorherigen Klicks angefügt haben, bleiben aktiv.

so machte ich die folgenden Änderungen WRT zur vorherigen 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'); 
}); 

Glücklich Codierung.

+0

verbindlich sind mehrere Kopien der Funktion der '' socket.on' refresh' Ereignis? – Jason

+0

Wann rufen Sie die Ajax-Funktion? –

+0

Nein nur console.log ('refresh'); –

Antwort

4

ich die folgenden Änderungen WRT zur vorherigen Code. Es hat funktioniert.

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

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

     } 
    }); 
}); 

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

Buchse.auf {} Ereignis wurde bei erfolgreicher Antwort verbindlich. Um einfach sein: Jedes Mal, wenn die Click-Handler aufgerufen wird, legt es zusätzliche Event-Listener in die Steckdose. Die Listener, die Sie bei den vorherigen Klicks angefügt haben, bleiben aktiv.

1

Sie fügen eine weitere Kopie der anonymen Funktion innerhalb der socket.onrefresh Funktion jedes Mal an, wenn eine ajax Anfrage erfolgreich ist.

Ich habe diesen Test gemacht. Wenn ich auf den Ajax-Button klicke und dann auf den "Klick mich" -Button klicke, bekomme ich einen "Howdy" in der Konsole. Wenn ich noch einmal auf die Ajax-Taste klicke, dann klicke auf "klick mich", ich bekomme zweimal "grüß dich". Klicken Sie auf Ajax wieder, "click me" prints "Howdy" dreimal usw.

<!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 ist die Lösung, wenn es Ihr Ziel ist einfach ein bestimmtes Verhalten für die socket.onrefresh Ereignis einzurichten, ist zu zuweisen dieses Verhalten außerhalb der ajax Funktion und außerhalb jeder Funktion, die mehrmals aufgerufen werden kann.

+0

So wie würde ich eine weitere Kopie der anonymen Funktion innerhalb der socket.on Refresh-Funktion vermeiden Befestigung, so dass ich gewohnt howdy mehrfach bekommen? @jason –

2

Was ich fühle ist, dass Steckdosen gut funktionieren. Kann sein, ajax() wird mehrmals aufgerufen.

Zum Beispiel rufen Sie ajax() auf etwas klicken. und bei Erfolg socket.on('refresh') wird ausgeführt. Wenn nun der Benutzer mehrmals auf die Schaltfläche klickt, wird Ajax so oft aufgerufen. Dies führt zu einer Wiederholung auf sockets()

So stellen Sie sicher, dass Sie den AJAX nicht mehrmals aufrufen.

Ihr Problem ist gelöst :)

Verwandte Themen