如果我在这里表现出任何无能,您将不得不原谅我,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() 来更新内容。我将努力为入站数据进行良好的转换,但首先我只需要让它正常工作。
如有任何建议或指点,我们将不胜感激。
***** 更新 ******
我做了一个 fiddle 。没有给我与我的开发环境相同的错误,但应该足够接近让你看到
最佳答案
您的问题在于事件的时间安排。您的 removeOldContent 函数使用 setTimeout 函数,该函数依次对 DOM 中的元素进行动画处理和移除。您的 getList() 函数在另一个函数完成之前正在执行。我用你的 fiddle 组合了一个快速不整洁的解决方案。我从您的 removeOldContent 方法返回一个 jquery 延迟对象,然后仅在解决该问题时调用 getList(以及从 dom 中删除的旧元素)。它不是最简洁的,但它会为您指明正确的方向。我在这里更新了你的 fiddle :https://jsfiddle.net/rdt1pfhk/16/
function removeOldContent() {
var deferred = new jQuery.Deferred();
....
return deferred;
}
$(document).on('click', '.quickPick', function (e) {
removeOldContent().then(function(){
getList();
});
});
关于javascript - 在处理完 .each() 循环中的每个元素后触发方法,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40802295/