feat: throttle leading options, closes #113

README.md

@@ -169,6 +169,19 @@ You can use the `throttle` options (in ms) specifying minimal state duration aft
 }">
 ```
 
+You can also pass a `leading` option to trigger the callback the first time when the visibility changes without waiting for the throttle delay.
+I can either be `visible`, `hidden` or `both`.
+
+```html
+<div v-observe-visibility="{
+  callback: visibilityChanged,
+  throttle: 300,
+  throttleOptions: {
+    leading: 'visible',
+  },
+}">
+```
+
 ## Passing custom arguments
 
 You can add custom argument by using an intermediate function:

index.html

@@ -84,14 +84,26 @@
           <div class="wrapper">
             <input id="is-visible" type="checkbox" v-model="isVisible" disabled>
             <label for="is-visible">Is visible?</label>
+
             <input id="disabled" type="checkbox" v-model="disabled">
             <label for="disabled">Disable</label>
+
             <span class="separator"></span>
+
             <button @click="show = !show">Toggle</button>
+
             <span class="separator"></span>
+
             <label for="throttle">Throttle</label>
             <input id="throttle" type="number" v-model="throttle" min="0" step="100">
+
+            <input id="throttle-leading-visible" type="checkbox" v-model="leadingVisible">
+            <label for="throttle-leading-visible">Leading (Visible)</label>
+            <input id="throttle-leading-hidden" type="checkbox" v-model="leadingHidden">
+            <label for="throttle-leading-hidden">Leading (Hidden)</label>
+
             <span class="separator"></span>
+
             <label for="threshold">Threshold</label>
             <span class="number">{{ threshold }}</span>
             <input type="range" v-model="threshold" min="0" max="1" step="0.01">
@@ -109,6 +121,9 @@
             v-observe-visibility="disabled ? false : {
               callback: visibilityChanged,
               throttle,
+              throttleOptions: {
+                leading: leadingVisible && leadingHidden ? 'both' : leadingVisible ? 'visible' : leadingHidden ? 'hidden' : false,
+              },
               intersection: {
                 threshold,
               },
@@ -131,6 +146,8 @@
             show: true,
             isVisible: true,
             throttle: 0,
+            leadingVisible: false,
+            leadingHidden: false,
             threshold: 0,
             count: 1,
             once: false,

src/directives/observe-visibility.js

@@ -30,7 +30,12 @@ class VisibilityState {
 		}
 		// Throttle
 		if (this.callback && this.options.throttle) {
-			this.callback = throttle(this.callback, this.options.throttle)
+			const { leading } = this.options.throttleOptions
+			this.callback = throttle(this.callback, this.options.throttle, {
+				leading: (state) => {
+					return leading === 'both' || (leading === 'visible' && state) || (leading === 'hidden' && !state)
+				},
+			})
 		}
 
 		this.oldResult = undefined

src/utils.js

@@ -12,13 +12,20 @@ export function processOptions (value) {
 	return options
 }
 
-export function throttle (callback, delay) {
+export function throttle (callback, delay, options = {}) {
 	let timeout
 	let lastState
 	let currentArgs
 	const throttled = (state, ...args) => {
 		currentArgs = args
 		if (timeout && state === lastState) return
+		let leading = options.leading
+		if (typeof leading === 'function') {
+			leading = leading(state, lastState)
+		}
+		if ((!timeout || (state !== lastState)) && leading) {
+			callback(state, ...currentArgs)
+		}
 		lastState = state
 		clearTimeout(timeout)
 		timeout = setTimeout(() => {
@@ -28,6 +35,7 @@ export function throttle (callback, delay) {
 	}
 	throttled._clear = () => {
 		clearTimeout(timeout)
+		timeout = null
 	}
 	return throttled
 }