JSFiddle - React, Tailwind, and code Playground
HTML
<button id='add-button'>Add</button>
<button id='clear-button'>Clear</button>
<button id='retry-button'>Retry</button>
<ul id="root-list"></ul>
JavaScript
// add items to list
var addToListPlain = function(n, atOnce) {
var i, item, items, _base, _i, _len, _results;
if (n == null) {
n = 1000;
}
if (atOnce == null) {
atOnce = false;
}
if (!window.lists[n]) {
items = [];
i = 0;
while (i < n) {
i++;
items.push("<li>the letter: " + i + "</li>");
}
items;
window.lists[n] = items;
}
if (atOnce) {
items = (_base = window.listsOnce)[n] || (_base[n] = window.lists[n].join("\n"));
console.profile();
list.append(items);
console.profileEnd();
return true;
} else {
items = window.lists[n];
_results = [];
for (_i = 0, _len = items.length; _i < _len; _i++) {
item = items[_i];
_results.push(list.append(item));
}
return _results;
}
};
// code
var n = 1000;
window.lists = {};
window.listsOnce = {};
window.list = $('#root-list');
window.addButton = $('#add-button');
window.clearButton = $('#clear-button');
window.retryButton = $('#retry-button');
addButton.click(function() {
addToListPlain(n, true);
});
clearButton.click(function() {
list.empty();
});
retryButton.click(function() {
list.empty();
addToListPlain(n, true);
});