Question

如果我在这里表现出任何无能，你就不得不原谅我，jquery和java不是我平常的工作领域。但是这里有：

我有一个页面，显示使用API调用从服务器中提取的项目的随机列表。这个想法是每次用户点击＆＃34;生成＆＃34;生成一个新列表并将其插入页面。这有效，但速度非常快，所有用户看到的都是快速变化的列表。为了改善现状，我决定在其中加入一些不错的动画和效果。

我有一个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（）来更新内容。我将努力为入站数据做一个很好的转换，但首先我只需要让它工作。

非常感谢任何建议或指示。

*****更新******

我做了一个小提琴。没有给我与我的开发环境相同的错误，但应该足够接近你看

https://jsfiddle.net/rdt1pfhk/9/

Answer 1

你的问题在于事件的发生时间。您的removeOldContent函数使用setTimeout函数，该函数反过来动画并从DOM中删除项目。你的getList（）函数在另一个函数完成之前执行。我用你的小提琴把一个快速不整洁的解决方案放在一起。我从removeOldContent方法返回一个jquery延迟对象，然后只在解析时调用getList（并从dom中删除旧项）。它不是最好的，但它会指向正确的方向。我在这里更新了你的小提琴：https://jsfiddle.net/rdt1pfhk/16/

function removeOldContent() {
    var deferred = new jQuery.Deferred();
    ....
    return deferred;
}

$(document).on('click', '.quickPick', function (e) {
    removeOldContent().then(function(){
       getList();        
    });
});

Answer 2

如果我理解正确，您只需要根据需要延迟某些功能。我认为您正在寻找的答案可以在这里找到：

How to delay calling of javascript function?

另外，我想提一下，我没有看到

$(document).ready(function () {
    //your code here
});

的任何地方。也许我错了，但既然你提到CSS被忽略了，你确定在你的代码开始执行之前页面被加载了吗？

在处理.each（）循环中的每个元素后触发方法

2 个答案: