Sorting and fading like a killfeed

Question

我想在JavaScript/JQuery中做一个CS：GO像killfeed。
对于不知道这个事情是什么样的人，我做了this GIF。

当你看我的current JFiddle你可以看到我目前的工作状态。
我开始尝试自己在第42行的函数sortList()中进行操作，但killfeed并没有按照正确的顺序正确删除entrys。
任何提示来解决这个问题？

Answer 1

这里是一个更简单的解决方案。

我觉得代码是相当多的自我解释加在代码中添加注释，但如果你有更多的问题随时问：

$(function() { 
 
    var feedID = 1; 
 
    //how many feeds to have in the box 
 
    var maxFeedsInBox = 4; 
 
    //feed life span in ms 
 
    var feedLife = 3000; 
 
    var preText = 'Player -> '; 
 
    var randomNames = ['Bot Trevor', 'Bot Troy', 'Bot Dennis', 'Bot Lucy', 'Bot Mark', 'Bot Maxi', 'Bot Kannnix', 'Bot Luis', 'Bot Jan', 'Bot Istso']; 
 
    var linebreaker = "<br />"; 
 

 
    var $image = $('img.clickable'); 
 
    var $killfeedbox = $('.killFeedBox'); 
 

 
    //set a timer to run a cleaning function. runs every feedLife ms. 
 
    var $FeedCleaner = setInterval(feedCleaner, feedLife); 
 

 
    //a function to generate a randon bot name 
 
    function getRandomName() { 
 
    var randomNumber = Math.floor((Math.random() * 10) + 0); 
 
    var randomName = randomNames[randomNumber]; 
 
    return randomName; 
 
    } 
 

 
    $image.click(function() { 
 
    //add a feed to the feedbox 
 
    addFeed(preText + getRandomName()); 
 
    }); 
 

 
    //a function that adds a feed and colors it with a cycling 4 colors, 
 
    //this function removed the first feed when it passes maximum defined feeds 
 
    function addFeed(txt) { 
 
    var feedsCount = $killfeedbox.children().length; 
 
    console.log(feedsCount); 
 
    if (feedID >= 4) { 
 
     feedID = 0; 
 
    } 
 
    feedID = feedID + 1; 
 
    var $newFeed = $("<span/>").addClass("textfieldCommon").addClass("textfield" + feedID).text(txt); 
 
    if (feedsCount >= maxFeedsInBox) { 
 
     $killfeedbox.children().first().remove(); 
 
    } 
 
    $newFeed.appendTo($killfeedbox); 
 
    } 
 

 
    function feedCleaner() { 
 
    var feedsCount = $killfeedbox.children().length; 
 
    if (feedsCount > 0) { 
 
     $killfeedbox.children().first().remove(); 
 
    } 
 
    } 
 

 
});

.textfieldCommon { 
 
    display: block; 
 
} 
 
.textfield1 { 
 
    color: red; 
 
} 
 
.textfield2 { 
 
    color: blue; 
 
} 
 
.textfield3 { 
 
    color: black; 
 
} 
 
.textfield4 { 
 
    color: green; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<img src="http://placehold.it/500x100" class="clickable" /> 
 
<br /> 
 
<span class="killFeedBox"></span>

Fiddle

更新：

如果你想

，这里是一个动画之一：Fiddle

Answer 2

你可能对这样的选择不感兴趣，但只是想指出在knockout.js这样的双向数据绑定框架中做这样的事情是多么容易，所以不要写很多你刚才操作的行在阵列上，其余的都是神奇的。如果你仅指定一个jquery来完成这个任务，那么最好做一些小的研究，而不是仅仅因为每个人都使用jquery。

Demo

function TableModel() { 
    var self = this; 
    self.rows = ko.observableArray([]), 
    self.addRow = function() { 
     self.rows.push(new Date()); 
     setTimeout(function(){ self.rows.shift(); }, 3000 + self.rows().length*1000); 
    } 
} 
ko.applyBindings(new TableModel()); 

<button id="button" data-bind="click: addRow">click</button> 
<div id="dash" data-bind="foreach: rows"> 
    <div data-bind="text:$data"></div> 
</div> 

Answer 3

我觉得你并不需要所有的文本框格的，你可以添加新条目到容器并设置驱逐舰上的每个其中。

function KillFeed(container, options) { 
    var self = this; 
    var names = ['Bot Trevor', 'Bot Troy', 'Bot Dennis', 'Bot Lucy', 'Bot Mark', 'Bot Maxi', 'Bot Kannnix', 'Bot Luis', 'Bot Jan', 'Bot Istso']; 
    this.options = $.extend({ 
     preffix: 'Player ->', 
     destroyAfter: 4000, 
     max: 4 
    }, options); 
    this.container = $(container); 

    function getRandomArrayItem(arr) { 
     return arr[Math.floor(Math.random() * arr.length)]; 
    } 

    function wrapper(name) { 
     return $('<div class="feed-instance">' + self.options.preffix + ' ' + name + '</div>'); 
    } 

    function checkMax() { 
     var entries = self.container.children(); 
     if (entries.length >= self.options.max) { 
      entries.first().remove(); 
     } 
    } 

    this.createEntry = function() { 
     var name = getRandomArrayItem(names); 
     var entry = wrapper(name); 

     checkMax(); 

     entry.get(0).selfDestroy = setTimeout(function() { 
      entry.remove(); 
     }, self.options.destroyAfter); 

     self.container.append(entry); 
    }; 

} 

http://jsfiddle.net/jLmq1Lhk/