Tengo este código que cambia la variable clave para cada clave en un dict. El propósito es actualizar html dom con el valor de esta clave. Lo que quiero es agregar una transición fadeIn y fadeOut en la actualización del valor. el problema es que actualmente, dado que la función .fadeOut() parece asíncrona, la clave se cambió antes de que finalice el fadeOut(), por lo que cuando cambio el valor después del fadeOut, la clave es otra cosa y el valor que actualizo es incorrecto. aquí está el ejemplo!
$(document).ready(function () { var devices = {}; devices.a = 10; devices.b = 22; devices.c = 440; devices.d = 435; devices.e = 56475; devices.h = "dfgfsd"; var fadeTime = 1000; for (key of Object.keys(devices)) { console.log(key + " | " + devices[key]); dom = document.getElementById(key); if(dom != undefined){ $( dom ).fadeOut( fadeTime, function() { $( this ).text(devices[key]).fadeIn(fadeTime); }); } } });https://jsfiddle.net/5zr8ts9f/15/
¡Puedes ver allí que todo el campo se actualiza con el último valor del dict!
¿Hay alguna forma de separar la variable que enviamos a la función jQuery?
¡Finalmente he encontrado una manera de hacerlo!
$(document).ready(function () { var devices = {}; devices.a = 10; devices.b = 22; devices.c = 440; devices.d = 435; devices.e = 56475; devices.h = "dfgfsd"; var fadeTime = 1000; for (key of Object.keys(devices)) { console.log(key + " | " + devices[key]); dom = document.getElementById(key); if(dom != undefined){ updateField(dom, devices[key]); } } }); function updateField(dom, value){ $( dom ).fadeOut( fadeTime, function() { $( this ).text(value).fadeIn(fadeTime); }); }