1

我正在循环浏览页面上的所有 .jplayer 类，然后对每个找到的类进行 ajax 调用，该调用返回与播放器关联的每首歌曲的 url。我想等到所有 ajax 调用完成并执行所有成功回调（即，所有 jplayer 实例都被实例化），然后在我的容器元素上运行 isotope。

我最初尝试运行 isotope 作为 loadTracks 方法的回调，但这不起作用，因为 ajax 调用在所有玩家实例化之前返回。当同位素试图确定页面的布局时，这会导致问题，因为每个玩家可以有不同的高度。

这是我当前检索播放器曲目的代码：

            function loadTracks(players, callback) {
            players.each(function(i,elem) {
                var playerId = $(this).attr('id'),
                    arr = playerId.split('_'),
                    postId = arr[2];

            $.ajax({
                    url: BaseHref + "api/v1/Post/" + postId + '/PostTracks',
                    dataType: "json",
                    success: function(data) {
                        var cssSelector = {
                            jPlayer: '#jquery_jplayer_' + postId,
                            cssSelectorAncestor: '#jp_container_' + postId
                        }
                        var playlist = [];
                        makePlaylist = (function() {
                            $.each(data.data, function(index,value) {
                                playlist.push({
                                    title: value['Title'],
                                    m4a: value['m4aURL'],
                                    ogg: value['oggURL']
                                });
                            });

                        })();


                        var options = {
                            swfPath: BaseHref + 'themes/simple/javascript/jplayer',
                            supplied: 'm4a, oga',
                            displayTime: 0,
                            addTime: 0,
                            removeTime: 0,
                            shuffleTime: 0,
                            enableRemoveControls: true
                        };
                        var myPlaylist = new jPlayerPlaylist(cssSelector, playlist, options);

                    }
                });
            });
            callback();
        }

然后我运行：

loadTracks($('.jp-jplayer'), function() {
            $container.imagesLoaded(function() {
                $container.isotope({
                    itemSelector : selector,
                    transformsEnabled: false,
                    visibleStyle: { opacity: 1 },
                    hiddenStyle: { opacity: 0 },
                    resizable: false,
                    masonry: {
                        columnWidth: setColumns($container),
                        gutterWidth: 10
                    },
                    getSortData: {
                        date: function ( $elem ) {
                        return $elem.data('date');  
                        }
                    },
                    sortBy: 'date',
                    sortAscending: false
                });
            });
            if ( $('#overlay').length ) setTimeout(function() { $('#overlay').fadeOut(); }, 1000);
        })

只有在我的 $.each 循环中的所有 ajax 调用都返回并且所有 jplayer 实例都已通过成功方法实例化之后，我如何才能在我的容器上执行同位素方法？

4

0 回答 0