ggb/Table.html

## Table.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>lazy table</title>
    <link rel="stylesheet" href="style.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
  </head>
  <body>
    <table id="lazyTable"></table>
  </body>
  <script>
    const table = document.querySelector("#lazyTable")
    const range = n => [...Array(n).keys()]
    const randomInt = upper => Math.round(Math.random() * upper) + 1

    const rowData = n => [`Row ${n}`, ...range(4).map(k => randomInt(10))]
    const rowDom = row => {
      const tr = document.createElement('tr')
      row.forEach((cell, index) => tr.insertCell(index).innerHTML = cell)
      return tr
    }

    const delay = (n) => () => {
      return [rowDom(rowData(n)), delay(n + 1)]
    }

    const take = function(fn, n) {
      return range(n).reduce(([fn, l], ele) => {
        const [s, t] = fn()
        return [t, [...l, s]]
      }, [fn, []])
    }

    const trs = delay(1)
    const [firstRun, initial] = take(trs, 50)
    initial.forEach(row => table.appendChild(row))

    let lastRun = firstRun,
        newRows = []
    const scrollCallback = _.debounce(function() {
      if(window.scrollY + 50 > window.innerHeight) {
        [lastRun, newRows] = take(lastRun, 30)
        newRows.forEach(row => table.appendChild(row))
      }
    }, 100)

    window.addEventListener("scroll",  scrollCallback)
  </script>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>lazy table</title>
	<link rel="stylesheet" href="style.css">
	<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
	</head>
	<body>
	<table id="lazyTable"></table>
	</body>
	<script>
	const table = document.querySelector("#lazyTable")
	const range = n => [...Array(n).keys()]
	const randomInt = upper => Math.round(Math.random() * upper) + 1

	const rowData = n => [`Row ${n}`, ...range(4).map(k => randomInt(10))]
	const rowDom = row => {
	const tr = document.createElement('tr')
	row.forEach((cell, index) => tr.insertCell(index).innerHTML = cell)
	return tr
	}

	const delay = (n) => () => {
	return [rowDom(rowData(n)), delay(n + 1)]
	}

	const take = function(fn, n) {
	return range(n).reduce(([fn, l], ele) => {
	const [s, t] = fn()
	return [t, [...l, s]]
	}, [fn, []])
	}

	const trs = delay(1)
	const [firstRun, initial] = take(trs, 50)
	initial.forEach(row => table.appendChild(row))

	let lastRun = firstRun,
	newRows = []
	const scrollCallback = _.debounce(function() {
	if(window.scrollY + 50 > window.innerHeight) {
	[lastRun, newRows] = take(lastRun, 30)
	newRows.forEach(row => table.appendChild(row))
	}
	}, 100)

	window.addEventListener("scroll", scrollCallback)
	</script>
	</html>