如何将变量发送到异步 jQuery 函数并确保变量之后不会更改？

发布于 2025-01-16 20:50:49 字数 846 浏览 4 评论 0原文

我有这段代码可以更改字典中每个键的键变量。目的是用这个键的值更新 html dom。我想要的是在值更新时添加淡入和淡出过渡。问题是，目前，由于 .fadeOut() 函数似乎是异步的，因此在 fadeOut() 完成之前键已更改，因此当我在 fadeOut 之后更改值时，键是其他内容，并且我更新的值是错误的。这是例子！

$(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/

你可以看到所有字段都得到了更新了字典的最后一个值！

有没有办法分离我们发送到 jQuery 函数的变量？

原文

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 ??

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

帅哥哥的热头脑 2025-01-23 20:50:49

我终于找到了方法！

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

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);
  });
}

回复收藏 0 原文

~没有更多了~