Too many intermediate bond values

[fonsp]

Our bond values iterator is lossy, meaning that we don't send intermediate bond values while the notebook is running. This is important, because:

Pluto.jl/sample/Interactivity.jl

Line 206 in d8bf859

The update mechanism is _lossy_ and _lazy_, which means that it will skip values if your code is still running - and **only send the latest value when your code is ready again**. This is important when changing a slider from `0` to `100`, for example. If it would send all intermediate values, it might take a while for your code to process everything, causing a noticeable lag."

But recently, it has not been working very well 👀

Example 1

Schermopname.2022-02-03.om.17.16.43.mov

You can see that it "keeps going for too long", because the server is catching up with previous bond values.

Example 2

Here is another example, a button that sends 60 values in one second when you click. The first cell should only show 0 and 59, no intermediate values.

Schermopname.2022-02-03.om.17.16.18.mov

Code

# ╔═╡ 3bee5e56-302d-4b50-86c3-42b9229304f1
@bind laksjdflkjasdf Slider(1:10000)

# ╔═╡ 5b2865a0-edd9-4a92-b349-5b9a682da49e
sleep(1); laksjdflkjasdf

# ╔═╡ 5247aa82-5099-49c6-b967-2a3cec0cd5e9
sleep(1); zzz

# ╔═╡ a3a63f07-9c71-4af1-a65b-2eb1a7567d02
@bind zzz @htl("""
<div>
	<button>Click me</button>
	<span></span>
	

	<script id="zzz">
	const div = currentScript.parentElement
	
	const button = div.firstElementChild
	const span = div.querySelector("span")

	div.value = "click to start!"

	if(this == null) {
		button.addEventListener("click", (e) => {
			let counts = 0
			let f = () => {
				div.value = counts
				div.dispatchEvent(new CustomEvent("input"))
		
   				counts++
				span.innerText = counts
				if(counts < 60){
				   requestAnimationFrame(f)
				}
			}
			f()
			e.stopPropagation()
		})
	}

	return div
	</script>
</div>
""")

Cause

See #1892