feat(useIdle): add reset capability (#2880)

Co-authored-by: Anthony Fu <anthonyfu117@hotmail.com>
vueuse · Mar 23, 2023 · f4d3542 · f4d3542
1 parent 7917665
commit f4d3542
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 6 deletions.
diff --git a/packages/core/useIdle/index.md b/packages/core/useIdle/index.md
@@ -16,6 +16,26 @@ const { idle, lastActive } = useIdle(5 * 60 * 1000) // 5 min
 console.log(idle.value) // true or false
 ```
 
+Programatically resetting:
+
+
+```js
+import { watch } from 'vue'
+import { useCounter, useIdle } from '@vueuse/core'
+
+const { inc, count } = useCounter()
+
+const { idle, lastActive, reset } = useIdle(5 * 60 * 1000) // 5 min
+
+watch(idle, (idleValue) => {
+  if (idleValue) {
+    inc()
+    console.log(`Triggered ${count.value} times`)
+    reset() // restarts the idle timer. Does not change lastActive value
+  }
+})
+```
+
 ## Component Usage
 
 ```html

diff --git a/packages/core/useIdle/index.ts b/packages/core/useIdle/index.ts
@@ -34,6 +34,7 @@ export interface UseIdleOptions extends ConfigurableWindow, ConfigurableEventFil
 export interface UseIdleReturn {
   idle: Ref<boolean>
   lastActive: Ref<number>
+  reset: () => void
 }
 
 /**
@@ -59,13 +60,17 @@ export function useIdle(
 
   let timer: any
 
+  const reset = () => {
+    idle.value = false
+    clearTimeout(timer)
+    timer = setTimeout(() => idle.value = true, timeout)
+  }
+
   const onEvent = createFilterWrapper(
     eventFilter,
     () => {
-      idle.value = false
       lastActive.value = timestamp()
-      clearTimeout(timer)
-      timer = setTimeout(() => idle.value = true, timeout)
+      reset()
     },
   )
 
@@ -80,9 +85,13 @@ export function useIdle(
           onEvent()
       })
     }
-  }
 
-  timer = setTimeout(() => idle.value = true, timeout)
+    reset()
+  }
 
-  return { idle, lastActive }
+  return {
+    idle,
+    lastActive,
+    reset,
+  }
 }