Question

我正在Angular建立一个音乐网站，用户可以通过点击随机播放按钮来播放歌曲。我可以使用以下代码进行随机播放：

var shuffleArray = function(array) {
    var m = array.length, t, i;
    // While there remain elements to shuffle
    while (m) {
        // Pick a remaining element…
        i = Math.floor(Math.random() * m--);
        // And swap it with the current element.
        t = array[m];
        array[m] = array[i];
        array[i] = t;
    }
    return array;
}
$scope.shuffleThis = function(tracks){
    shuffleArray(tracks);
}

我无法弄清楚的是如何在不刷新页面或调用原始JSON响应的情况下允许用户恢复原始顺序。

更新：

所以我使用了以下代码，基本上克隆了数组以便以后使用它，但我遇到了一个问题。当我去清洗数组（将$ scope.tracks绑定到$ scope.unshuffled）时，它正在设置父控制器的$ scope.tracks。我目前拥有的结构是：mainCtrl设置在html标签上，这是shuffle / unshuffle函数所在的位置。然后每个页面url都有一个控制器。为了给你一些背景信息，这里是我正在建设的网站......

www.beta.audiblecoffee.com

如您所见，如果您开始播放歌曲，则会显示底部播放器控件。当您单击一次随机播放按钮（右下角）时，歌曲会随机播放。然后你再次点击随机播放按钮，没有任何反应......现在如果你选择一个顶级导航项目（新的，热门的，随机播放等），原始有序数组将会短暂出现，然后是来自该特定页面的新的$ scope.tracks controller将从unshuffle函数覆盖$ scope.tracks。但是，如果您单击另一个顶部导航项，则会发生相同的情况。所以我想我的问题是我如何将未调整的数组设置为子控制器$ scope.tracks？

var shuffleArray = function(array) {
    var m = array.length, t, i;
    // While there remain elements to shuffle
    while (m) {
        // Pick a remaining element…
        i = Math.floor(Math.random() * m--);

        // And swap it with the current element.
        t = array[m];
        array[m] = array[i];
        array[i] = t;
    }

    return array;
}


$scope.shuffleThis = function(tracks) {
    $scope.isShuffled = true;
    $scope.unshuffled = tracks.slice(0);
    shuffleArray(tracks);
    console.log(player.tracks);
}

$scope.unshuffleThis = function() {
    $scope.isShuffled = false;
    player.tracks = $scope.unshuffled;
    $scope.tracks = $scope.unshuffled;
}

Answer 1

这里的想法是使用中间参考，从不实际修改原始播放列表

var originalArray = [1,2,3];
var playlist = originalArray;

function shufflePlaylist() {
    playlist = shuffleArray(originalArray.slice());
}

function restoreOriginalPlaylist() {
    playlist = originalArray;
}

作为旁注：这不是一个有意义的事情，你只需要将其绑定到范围之后。

Answer 2

你可以：

保持对原始数组的引用并每次随机播放副本：

var originalTracks = ...

$scope.shuffleThis = function(tracks) {
    shuffleArray(originalTracks.slice(0));
};

从函数中返回数组的副本：

var shuffleArray = function(array) {
    var m = array.length, t, i;
    array = array.slice(0);
    ...
};

Answer 3

您可以为每个项添加属性“shuffledIndex”，并根据此索引过滤列表（使用angular的过滤器顺序，请参阅https://docs.angularjs.org/api/ng/filter/orderBy）。

这可以防止您存储2个列表：原始列表和随机播放列表。

var shuffleArray = function(array) {
var m = array.length, t, i;

// While there remain elements to shuffle
while (m) {
    // Pick a remaining element…
    i = Math.floor(Math.random() * m--);

    array[m].shuffledIndex = i;
}

return $filter('orderBy')(array, 'shuffledIndex');
}

Answer 4

为什么不将原始数组保留在原来的数组中，并在0和数组长度之间生成一个随机数 - 1？

array = ['test1','test2','test3','test4']
getRandomResult = function(){
  var randomIndex = Math.floor(Math.random() * array.length - 1) + 1
  var item = array[randomIndex];
  array.splice(randomIndex, 1) //remove to have the possibility for the same song twice in a row
  return item;
}

这样您就不必复制它，也不必重新排序。

或者你可以这样做

array = ['test1','test2','test3','test4']
indexes = []
for(var i = 0; i < array.length; i++){
  indexes.push(i)
}
indexes = shuffleArray(indexes); //your original function

然后拉出第一个索引并抓住该索引的歌曲。

这确实需要更多的内存，但至少你没有复制完整的原始数组。

Answer 5

$scope.shuffleThis = function(tracks) {
    $scope.unshuffled = tracks.slice(0);
    shuffleArray(tracks);
}

或者，如果您不想将原件保存在$ scope：

var unshuffled;
$scope.shuffleThis = function(tracks) {
    unshuffled = tracks.slice(0);
    shuffleArray(tracks);
}

实际上，我认为一般来说返回克隆而不是修改原始内容真的更好;后者实际上更具有副作用，需要在实际应用中仔细记录：

function shuffle(array) {
    var m = array.length, t, i;
    array = array.slice(0);
    // While there remain elements to shuffle
    while (m) {
        // Pick a remaining element…
        i = Math.floor(Math.random() * m--);
        // And swap it with the current element.
        t = array[m];
        array[m] = array[i];
        array[i] = t;
    }
    return array;
}

我也不确定你为什么不设置$scope.shuffleThis = shuffleArray，但这取决于你。

在shuffle之后恢复到原始数组顺序

5 个答案: