clear-timeout

Like on, clear-timeout also accepts a single event action as input.

This feature cancels a delayed request that was previously scheduled by either debounce or throttle.

If an element instance has a timeoutId property, it will be passed to the global clearTimeout function and then set to undefined.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<p class="mt0">
  If you click the "Cancel" button within one second after clicking "Increment",
  no request will be sent.
</p>

<button
  class="btn"
  on:click="increment"
>
  Increment
</button>

<button
  class="btn"
  on:click="cancelIncrement"
>
  Cancel
</button>

<input
  class="input mt3"
  type="text"
  readonly
  name="count"
  value="0"
  on="increment"
  debounce="1000"
  src="/increment"
  result="incResult"
  render="incResult"
  position="replaceWith"
  clear-timeout="cancelIncrement"
>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
<input
  class="input mt3"
  type="text"
  readonly
  name="count"
  value="{ +server.getParam('count') + 1 }"
  on="increment"
  debounce="1000"
  src="/increment"
  result="incResult"
  render="incResult"
  position="replaceWith"
  clear-timeout="cancelIncrement"
>

If you click the "Cancel" button within one second after clicking "Increment", no request will be sent.