javascript - 在处理完 .each() 循环中的每个元素后触发方法

标签 javascript jquery css css-animations

如果我在这里表现出任何无能,您将不得不原谅我,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 。没有给我与我的开发环境相同的错误,但应该足够接近让你看到

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

最佳答案

您的问题在于事件的时间安排。您的 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/

相关文章:

javascript - Next.js 在 React 中导入从子组件获取数据到父页面

c# - 如何通过外部按钮一次性将jqgrid数据添加到数据库中

css - 如何使用图像作为 Bootstrap 的封面

javascript - 使用 Vue.js 应用条件 CSS 类时出现问题

javascript - 根据菜单高度更改 anchor 位置

javascript - 使用 JavaScript 交替添加类到列表项

javascript - 对列进行排序显示 jqGrid 中的隐藏行

c# - 多文件问题

嵌套 div 和在多个级别中使用的类的 CSS 问题

css - 是@Page { 大小 :landscape} obsolete?