I have this code that change the key variable for each key in a dict. The purpose is to update html dom with the value of this key. What i want is to add a fadeIn and fadeOut transition on value update. the problem is that currently, since the .fadeOut() function seems async, the key got changed before the fadeOut() is finised so when i change the value after the fadeOut, the key is something else and the value i update are wrong. here is the exemple!
$(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/
You can see there that all the field get updated with the last value of the dict!
Is there a way to detach of the variable we send to the jQuery function ??
I final have found a way to do it!!
$(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);
});
}