debounce events

package.json

@@ -56,6 +56,7 @@
     "webpack-merge": "^4.1.0"
   },
   "dependencies": {
-    "core-js": "^2.5.3"
+    "core-js": "^2.5.3",
+    "lodash": "^4.17.5"
   }
 }

src/Drag.vue

@@ -1,7 +1,7 @@
 <template>
 	<component :is="tag"
 		:draggable="draggable"
-		@drag="emitEvent(events.drag, $event)"
+		@drag="debouncedEmitEvent(events.drag, $event)"
 		@dragstart="emitEvent(events.dragstart, $event)"
 		@dragenter="emitEvent(events.dragenter, $event)"
 		@dragleave="emitEvent(events.dragleave, $event)"
@@ -18,6 +18,7 @@
 <script>
 	import transferDataStore from './transferDataStore';
 	import { dropEffects, effectsAllowed, events } from './constants';
+	import memoizeDebounce from './memoizeDebounce';
 
 	export default {
 		props: {
@@ -91,6 +92,9 @@
 					this.dragging = false;
 				}
 			},
+			debouncedEmitEvent: memoizeDebounce(function (name, nativeEvent) {
+				this.emitEvent(name, nativeEvent);
+			}),
 		},
 	};
 </script>

src/Drop.vue

@@ -2,7 +2,7 @@
 	<component :is="tag"
 		@dragenter="emitEvent(events.dragenter, $event)"
 		@dragleave="emitEvent(events.dragleave, $event)"
-		@dragover.prevent="emitEvent(events.dragover, $event)"
+		@dragover.prevent="debouncedEmitEvent(events.dragover, $event)"
 		@drop="emitEvent(events.drop, $event)"
 	>
 		<slot :transfer-data="scopedData"></slot>
@@ -12,6 +12,7 @@
 <script>
 	import transferDataStore from './transferDataStore';
 	import { events } from './constants';
+	import memoizeDebounce from './memoizeDebounce';
 
 	const insideElements = new Set();
 
@@ -59,6 +60,9 @@
 				// Finally, since Vue can't react to Set changes, set a flag indicating drag status.
 				this.isDraggingOver = Boolean(insideElements.size);
 			},
+			debouncedEmitEvent: memoizeDebounce(function (name, nativeEvent) {
+				this.emitEvent(name, nativeEvent);
+			}),
 		},
 	};
 </script>

src/constants.js

@@ -8,3 +8,4 @@ export const effectsAllowed = keyMirror([
 	'none', 'copy', 'copyLink', 'copyMove', 'link', 'linkMove', 'move', 'all',
 	'uninitialized',
 ]);
+export const debounceEventsMilliseconds = 500;

src/memoizeDebounce.js

@@ -0,0 +1,11 @@
+import _ from 'lodash';
+import { debounceEventsMilliseconds } from "./constants";
+export default function memoizeDebounce(func, wait=debounceEventsMilliseconds, options={leading: true}) {
+	const mem = _.memoize(function () {
+		return _.debounce(func, wait, options);
+	}, options.resolver);
+	return function () {
+		mem.apply(this, arguments).apply(this, arguments);
+	};
+}
+