Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- The issue with the current code is that you're both adding to and removing from the end of the array, so it effectively remains static. As a simple example, say you have these 3 log entries:
- ["oldest", "older", "old"]
- You now add a new message with Array.push(), which adds it to the end:
- ["oldest", "older", "old", "new"]
- You run dojo.destroy on the first element (oldest), which does correctly remove it from the page. Finally, you truncate the array by setting array.length = 3. The problem is that this removes excess elements from the END of the array, so your array ends up back at what it was:
- ["oldest", "older", "old"]
- Whenever you go through this sequence, whenever a new message is added, it attempts to delete "oldest", every single time. It only actually works the first time through, then once that node is gone no future ones ever get erased.
- The solution is to use the Array.shift() method to remove the first element from the array, rather that setting the length which removes the last one. However, there is another problem with this method: while it does correctly remove the oldest span every time a new message is added, every span is coupled with a br, and those are not touched. To fix that, I'd recommend not using br's at all, and set display: inline-block on the messages to keep them all on separate lines.
- So, in summary, this is the corrected code:
- function(message, type){
- var gameLog = dojo.byId("gameLog");
- dojo.forEach(dojo.query("*", gameLog), function(entry, i){
- var opacity = dojo.getStyle(entry, "opacity");
- dojo.setStyle(entry, "opacity", opacity-0.033);
- });
- var span = dojo.create("span", { innerHTML: message, className: "msg" }, gameLog, "first");
- if (type){
- dojo.addClass(span, "type_"+type);
- }
- var spans = this.spans;
- spans.push(span);
- if (spans.length > 50){
- dojo.destroy(spans.shift()); //remove the first element from the array and destroy it
- }
- return span;
- }
- Along with this additional CSS:
- .msg {
- display: inline-block;
- }
- As a side note, keeping even 50 messages seems like overkill. All messages past the 31st end up with negative opacity, so that might be a good place to stop, but I leave that up to you.
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement