Fix debounce timeout trigger (#293)

* Add tests for a timeout bug

* Update test with trigger check

* Fix the bug

* Unrelated change - better name for internal effect, so it is easier to see in the logs

* Better name for throttle timer too

* use guard as peer dep requries

Author: AlexandrHoroshih

src/debounce/debounce.fork.test.ts

@@ -7,6 +7,7 @@ import {
   createEvent,
   createStore,
   sample,
+  createWatch,
 } from 'effector';
 import { wait, watch } from '../../test-library';
 
@@ -203,4 +204,31 @@ describe('edge cases', () => {
     expect(listener).toBeCalledTimes(1);
     expect(listener).toBeCalledWith('two');
   });
+
+  test('no trigger call, but timeout change on the fly', async () => {
+    const trigger = createEvent();
+
+    const changeTimeout = createEvent<number>();
+    const $timeout = createStore(40).on(changeTimeout, (_, x) => x);
+    const db = debounce({ source: trigger, timeout: $timeout });
+
+    const listener = jest.fn();
+    const triggerListener = jest.fn();
+    const scope = fork()
+    createWatch({
+      unit: db,
+      fn: listener,
+      scope,
+    })
+    createWatch({
+      unit: trigger,
+      fn: triggerListener,
+      scope,
+    })
+
+    await allSettled(changeTimeout, { scope, params: 10 });
+
+    expect(listener).toBeCalledTimes(0);
+    expect(triggerListener).toBeCalledTimes(0);
+  })
 });

src/debounce/index.ts

@@ -84,6 +84,7 @@ export function debounce<T>({
     });
   });
   const timerFx = attach({
+    name: `debounce(${source.shortName || source.kind}) effect`,
     source: {
       timeoutId: $timeoutId,
       rejectPromise: $rejecter,
@@ -126,7 +127,7 @@ export function debounce<T>({
   const requestTick = merge([
     source,
     // debounce timeout is restarted on timeout change
-    $timeout,
+    guard({ clock: $timeout, filter: timerFx.pending }),
   ]);
 
   guard({

src/throttle/index.ts

@@ -37,9 +37,10 @@ export function throttle<T>({
 
   const $timeout = toStoreNumber(timeout);
 
-  const timerFx = createEffect<number, void>(
-    (timeout) => new Promise((resolve) => setTimeout(resolve, timeout)),
-  );
+  const timerFx = createEffect<number, void>({
+    name: `throttle(${(source as Event<T>).shortName || source.kind}) effect`,
+    handler: (timeout) => new Promise((resolve) => setTimeout(resolve, timeout)),
+  });
 
   // It's ok - nothing will ever start unless source is triggered
   const $payload = createStore<T>(null as unknown as T, { serialize: 'ignore' }).on(