# State shortcuts: INC, TOGGLE, NUL, UPDATE, UNWATCH, WAIT, BLOCKED and CACHEPATH

> Small functions that change or watch a value of the state by its path, wait until a value exists, run something only once in a period and keep a value of the state in the cache.

Framework: jcomponent20
Product: jComponent 20 (jcomponent@20)
Language: en
Content-SHA256: ba5b6aa6fcd769def5a014d40e4f3a44daaac5d6226829ae150b35912a5664de
Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c
Sources: jcomponent20@3fedd009a277f50fddc608b97afbec553b67c51b
Review: not-recorded

These functions work on the state of jComponent by **path** (`'user.visits'`), like `SET()` and `GET()`, and every one of them notifies the components and the watchers of the path.

- `INC(path, [value])` adds `value` (default `1`) to a number; when the value is empty it starts from `0` and when it is a text it is read as a number first.
- `TOGGLE(path)` changes a boolean (an empty value becomes `true`). `NUL(path)` and its alias `NULL(path)` set the value to `null`.
- `UPDATE(path)` (alias `UPD`) notifies everybody who uses the path **without changing the value**: use it after you changed an object or an array in place.
- `UNWATCH(path, [fn])` removes the watchers of the path made with `WATCH()`; with `fn` only that one.
- `WAIT(fn or path, callback)` runs `callback` as soon as the function returns something true, or the path has a value. It checks at once and then **every 500 ms**.
- `BLOCKED(key, timeout, [callback])` returns `false` the first time and `true` for the next `timeout` ms (`'5 seconds'` also works): it is a guard against a double click or a repeated request. The `callback` runs only when it is not blocked.
- `CACHEPATH(path, expire, [default])` keeps a value of the state in the cache (`CACHE()`): it sets the path to the cached value when there is one (or to `default`, which can be a function) and saves every change under the key `path_<path>`.
- A path is a path in the state of the page, so a name like `name` or `location` is a property of `window`: use names of your own (`person`, `prefs.mode`).
- `setTimeout2(id, fn, ms, [limit], [param])` is a debounced `setTimeout()`: calling it again with the same `id` restarts the timer, so `fn` runs once, `ms` after the last call. With `limit` the timer is restarted at most that many times and the following calls are ignored until `fn` has run, so a stream of calls cannot postpone it forever. `clearTimeout2(id)` cancels it and returns `true` when there was one.
- `CLONE(value)` makes a deep copy (dates stay dates), `COPY(from, to)` copies the properties of one object into another, deep, and returns `to`. `NOOP` is a function that does nothing and `WARN(...)` writes to `console.warn`.

```html public/index.html
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title>jComponent</title>
	<link rel="stylesheet" href="//cdn.componentator.com/spa.min@20.css" />
	<script src="//cdn.componentator.com/spa.min@20.js"></script>
</head>
<body>
	<p class="out"></p>
	<script>

		window.sample = { watched: 0 };

	</script>
</body>
</html>
```