jquery - temas - prestashop 1.7 plantillas gratis
Clic jQuery: evita múltiples clics en dispositivos móviles (5)
Estoy usando Phonegap para construir mi aplicación iOS / Android, básicamente un control remoto que puede emular algunas teclas en el teclado de mi computadora portátil. (Para controlar la reproducción de video, etc.).
Dado que es una página web, tengo imágenes que cuando se hace clic se conectan a mi servidor Java Socket en mi computadora portátil. El problema al que me enfrento es que, cada vez que hago clic en un botón, solo una vez (como el botón de pausa), veo que se dispara más de una solicitud en la consola de Java. Pero esto sucede solo cuando hago clic (tocar) en mi teléfono. Cuando intento lo mismo en el navegador de mi computadora portátil, se comporta como se esperaba (solo una solicitud).
Revisé varias publicaciones, donde el consejo general es usar ''unbind ()'' y ''off ()'', pero parece que nada funciona. El fragmento de código está a continuación.
$("#play").off().on(''click'',function(){
//alert("Play");
jQuery.ajax({
type: "GET",
async: true,
url: ''http://''+ip+'':10007/function=play?'',
success: function (msg)
{ },
error: function (err)
{ }
});
});
Usé esa alerta para verificar si el evento se dispara más de una vez. La alerta aparece solo una vez, lo que significa que el evento se dispara solo una vez. Así que es solo una vez, haga clic en (tocar) => Un evento => ¡Pero múltiples solicitudes!
Estoy revisando la respuesta del servidor con este fragmento de código:
while(true) {
Socket sock = servsock.accept();
System.out.println("Connection from: " + sock.getInetAddress());
Scanner in = new Scanner(sock.getInputStream());
PrintWriter out = new PrintWriter(sock.getOutputStream());
String request = "";
while (in.hasNext()) {
request = in.next( );
if (request.contains("function="))
{
inputLine = request.split("function=")[1];
System.out.println ("^^^^^" + inputLine);
...
El resultado aparece tres veces en la consola cuando se solicita desde el móvil, pero solo una vez cuando se solicita desde el navegador de mi computadora portátil.
No entiendo por qué y no estoy seguro de cómo se puede prevenir. ¿Alguna sugerencia?
Una forma de activar el evento de clic una vez es usar .one () en lugar de .on () . Esto asegurará que el evento se dispare una vez. Una vez completada la solicitud AJAX, puede volver a agregar la función .one ().
Tu código se verá algo así como:
function processOnce() {
//alert("Play");
jQuery.ajax({
type : "GET",
async : true,
url : ''http://'' + ip + '':10007/function=play?'',
success : function (msg) {
$("#play").one(''click'', processOnce());
},
error : function (err) {}
});
}
$("#play").one(''click'', processOnce());
Otra posible solución es esperar el evento deviceready. Entonces en tu etiqueta corporal agrega esto:
<body onload="onBodyLoad()">
y para el guion:
<script type="text/javascript">
function onBodyLoad() {
document.addEventListener("deviceready", onDeviceReady, false);
}
function onDeviceReady() {
$(function() {
// bind your elements
});
}
Por último, puede agregar un indicador para determinar si se ha producido un clic anteriormente. Entonces su código se verá así:
var clicked = false;
$("#play").on(''click'', function () {
if (clicked)
return;
clicked = true;
//alert("Play");
jQuery.ajax({
type : "GET",
async : true,
url : ''http://'' + ip + '':10007/function=play?'',
success : function (msg) {
clicked = false;
},
error : function (err) {}
});
});
Espero que esto ayude.
Use console.log("called") para verificar cuántas veces se está llamando al botón. Para ver la salida en chrome está en vista-> Desarrollador-> Consola javaScript. La alert("Play"); solo se ejecutará una vez.
He tenido una experiencia similar con esto usando jQuery en el que se llama un modal dos veces con un solo clic. Entonces me di cuenta de que el problema es que invoco eventos fuera de mi código de document.ready .
Prueba estos. Entonces, en lugar de tener
$(function(){
...
});
$("#play").off().on(''click'',function(){
...
});
Pruébalo de esta manera:
$(function(){
...
$("#play").off().on(''click'',function(){
...
});
});
Otra forma de resolver este problema es usar una bandera que puede establecer una vez que haga clic en el botón. Luego puede verificar el valor de la bandera y devolver falso; en caso de que el valor ya esté establecido.
// Pseudo Código
- Mantenga la bandera en falso inicialmente.
- Al hacer clic, verifica el valor de la bandera.
- Si la bandera está configurada, devuelve falso;
- Si la bandera no está configurada, configure la bandera.
- Una vez que se llama al método de éxito, restablece el valor a falso nuevamente.
Esto resolverá el problema de las llamadas múltiples al menos. Otro ejercicio sería determinar por qué este es un problema solo en un dispositivo.
Tal vez ya ha probado estas soluciones, pero en caso de que no lo haya hecho,
Intenta poner
$("#play").off(''click'');en la función de devolución de llamada (correcta o completa) en lugar de~off().on(''click'')~.Agregar
return false;a la devolución de llamada.