如果我在这里表现出任何不当之处，就必须原谅我，jQuery和Java并不是我通常的工作领域。但是这里：
我有一个页面显示使用API调用从服务器提取的项目的随机列表。这个想法是，每当用户单击“生成”时，都会产生一个新列表并将其插入页面。这行得通，但是速度非常快，用户看到的只是一个快速变化的列表。为了使事情更加生动有趣，我决定添加一些漂亮的动画和效果。
我有一个jquery函数，该函数循环遍历子元素列表中的每个元素，并切换子元素的css样式，以便应用来自animate.css库的效果。问题是当我有另一个函数加载新列表时，该函数立即被调用，因此所有css转换都将被忽略。否则，它们将没有机会运行，因为第二种方法会立即触发。
我试过使用回调函数，但没有喜悦，我试过使用延迟对象。完全没有运气。
这是我到目前为止的代码：
function removeOldContent() {
$('#removableContent > div').each(function (index) {
var elm = $(this);
setTimeout(function () {
elm.toggleClass('customAnim', function () {
$(this).remove();
});
}, index * 150);
});
}
function getList() {
var rId = $('.tab-content').find('.active').data('d-id');
var serviceUrl = '/GetRandom/GetList';
$.ajax({
type: 'POST',
url: serviceUrl,
data: {
reportId : rId
},
success: function(data) {
$('#reportContainer').html(data).fadeIn('slow');
}
});
}
理想情况下，在所有超时都运行之后，我希望能够让removeOldContent（）完全完成。然后触发getList（）来更新内容。我将为入站数据进行一个很好的转换，但首先我需要使它正常工作。
任何建议或指示，将不胜感激。
***** 更新 ******
我做了一个小提琴。没有给我与我的开发环境相同的错误，但应该足够接近以便您看到
您的问题在于事件的时间安排。您的removeOldContent函数使用setTimeout函数，该函数依次设置动画并从DOM中删除项目。您的getList（）函数在另一个函数完成之前正在执行。我用你的小提琴来整理一个快速，整洁的解决方案。我从您的removeOldContent方法返回一个jquery延迟对象，然后仅在解决该问题（以及从dom中删除较旧的项目）时才调用getList。这不是最整洁的方法，但是它将为您指明正确的方向。我在这里更新了您的小提琴：https : //jsfiddle.net/rdt1pfhk/16/
function removeOldContent() {
var deferred = new jQuery.Deferred();
....
return deferred;
}
$(document).on('click', '.quickPick', function (e) {
removeOldContent().then(function(){
getList();
});
});
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句