Sobre lo que comentas que se vuelve lento al momento de cargar es por que En cada envio de mensaje vuelves a leer todos los mensajes existentes la base de datos:

    $result = mysqli_query($link, 'SELECT * FROM chat');
 
    while ($fila = mysqli_fetch_array($result)) {
        echo mostrarDatos($fila, $color);
    }

Esa funcion mostrarDatos te devuelve todos los datos y es lo que madas de regreso al ajax..

Offtopic para chiste geek.

Como te decia En cada actualizacion lees todos los mensajes otra vez y los vuelves a colocar en la ventana

$('#contenedor').empty().append( content );

Podrias simplemente llevar un registro de cual es el ultimo mensaje recivido por el usuario X y en el SQL del chat solo pedir los mensjaes que sean mayor que el ultimo dato mandado y listo,

Un buen lugar para guardar ese dato es en la cookie o en el session del php aunque opciones hay muchas. puedes delegarlo al cliente y que te lo mande con cada consulta ajax y actualizar la variable desde el javascrip cada que reciva elementos nuevos.

Entonces al recibitlos puede hacerles append normal sobre el div sin necesidad de actualizarlo todo.

Saludos

Muchas gracias por la aclaracion pero no te preocupes, ya tenia un script en ajax que cada segundo esta actualizando el div donde se encuentra el chat

Saludos

A ver por partes:

Si el script que he hecho no funcionase bien, no funcionaria en ninguna parte, sin embargo está funcionando (menos lo del scroll) perfectamente:

- La función se activa ya sea cuando le das a intro o click al boton <a>. En ningún otro momento se debería activar (a menos que la llames desde otra parte).
- Se puede comprobar en la demo.

¿Por qué dices entonces que no funciona bien? Si no está funcionando en tu página, eso es algo a parte y no es culpa mia. Habrá que encontrar el fallo.

Si cada vez que entras al chat se envia un mensaje vacio, revisa bien que estás haciendo porque el código que yo he escrito no hace nada de eso.

El problema del scroll ya te lo dije en tu otra pregunta y que esperes a que alguien sepa como arreglarlo. No es necesario que me lo recuerdes...

Ahora hay que tratar de localizar que es lo que está provocando que al entrar al chat se envie un mensaje en vacio.

Para no permitir enviar mensajes vacios:

if (mensaje == '') {
    alert('Debes escribir un mensaje!');
    return false;
}

En el link a la demo de esta respuesta se incluye esto, incluyelo en la función y mira si se sigue enviando el mensaje en blanco. Si sigue ocurriendo entonces es algo totalmente ajeno a la función, pero si ya no ocurre entonces quiere decir que en algún lado de tu página estás llamando a la función myFunction().

Haz un poco de debug y descubrirás que está ocurriendo en tu página. Si no logras descubrir donde está el fallo, muestranos todo el código y se intentará localizar el fallo y solucionarlo.


Edito: Se me olvido comentarte: A parte de la comprobación de mensaje vacio también hay otro cambio al actualizar el div, en la demo lo verás, cambia la linea que tienes por $('#final').before( content ); Esto lo que hace es mostrar los mensajes en el orden correcto.