使用Jquery显示多个API调用的动画文本
我需要在用户点击时创建一个web api调用列表(例如: 20)。每个web api都要更新特定的用户。我遍历了每个用户，并使用$.ajax()方法调用web。
为了显示进度，我使用了一个微调器。在sprnner下面，我想显示每个web api调用的进度。这意味着在成功的web api调用中，我想要显示用户名的尾部(例如:John的信息已更新)。因此，对于每个成功的调用，文本都应该改变，并设置html值。我想把它一个接一个地显示为动画文本。
约翰的信息更新Next ->山姆的信息更新Next ->丹的信息更新....so
注意:上面的线条应该一次显示一条。它不是附加，而是在每次成功调用时替换其名称。
for(var i=0; i < userArray.Length; i++)
{
$.ajax(
url: '<some url>',
method: 'PUT',
data: userData,
sucess: function(response){
$('#displayText').html(`${userData.Name}'s Information Updated`);
}
);
}上面的代码不是一个接一个地显示用户名，它没有改变每个服务成功调用中的displayText id的值，并以累加的方式显示进度。
我还尝试在内部使用setInterval和setTimeOut，但没有成功。请帮帮忙。
回答 1
Stack Overflow用户
发布于 2020-10-17 05:20:08
Ajax是异步的，所以当你把它放到一个循环中时，你实际上是在并行而不是顺序地调用所有的请求。如果你想做一个顺序请求，你会想要使用一个队列/堆栈。请参见下面的示例。
function updateUser(user) {
return $.ajax({
url: '<some url>',
method: 'PUT',
data: user
});
}
function updateUsers(users, onUpdate) {
const queue = users.slice();
const dequeue = () => {
if (queue.length > 0) {
const user = queue.shift();
updateUser(user)
.then(function () {
onUpdate(user);
})
.always(function () {
dequeue();
});
}
};
dequeue();
}
updateUsers([1,2,3], function(user) {
$('#displayText').text(`${user.Name}'s Information Updated`);
});使用用户列表调用updateUsers将对单个用户的更新进行排队，并等待他们完成。每次成功更新后，用户都会调用onUpdate，这样您就可以将用户更新逻辑与特定于视图的内容解耦。
还要注意.text()而不是html的使用。由于您使用的是用户输入，因此用户的名称可能是html，例如<script>alert('hahaha')</script>，您将执行恶意用户想要的任何代码。请参阅xss
https://stackoverflow.com/questions/64395763
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号