can/demos/testing/throttled-input.html

MIT-licensed, client-side, JavaScript framework that makes building rich web applications easy.

<throttled-input></throttled-input>
<script id="demo-source" src="../../node_modules/steal/steal.js" dev-bundle>
import { StacheElement } from "can";

class ThrottledInput extends StacheElement {
	static view = `
		<input on:input:value:to="text" placeholder="Type Here, Then Wait" value:from="text" />
		<p>value: {{ text }}</p>
	`;

	static props = {
		text: {
			value({ lastSet, listenTo, resolve }) {
				let latest = "";
				let timeoutId = null;

				listenTo(lastSet, (val) => {
					latest = val;
					timeoutId = clearTimeout(timeoutId);

					timeoutId = setTimeout(() => {
						resolve(latest);
					}, 500);
				});
			}
		}
	};
}
customElements.define("throttled-input", ThrottledInput);
</script>