feat(throttle): use throttle instead of debounce

Author: missinglink

README.md

@@ -39,10 +39,11 @@ All configuration happens through **attributes** on the element. `api_key` is th
 
 Your Geocode Earth API key. [Sign up for a free trial »](https://geocode.earth)
 
-### `debounce`
+### `throttle`
 > defaults to `300`
 
 Used to prevent firing a request for every keystroke as the user types, in milliseconds.
+This is passed directly to the [`_.throttle`](https://lodash.com/docs/4.17.15#throttle) function.
 
 ### `size`
 > defaults to `10`

package-lock.json

@@ -11,9 +11,9 @@
   "dependencies": {
     "@geocodeearth/core-js": "^0.0.7",
     "downshift": "6.1.3",
-    "lodash.debounce": "^4.0.8",
     "lodash.escape": "^4.0.1",
     "lodash.template": "^4.5.0",
+    "lodash.throttle": "^4.1.1",
     "lodash.unescape": "^4.0.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2"

package.json

@@ -1,7 +1,7 @@
 import React, { useState, useMemo, useCallback, useRef, useEffect } from 'react'
 import { useCombobox } from 'downshift'
 import { createAutocomplete } from '@geocodeearth/core-js'
-import debounce from 'lodash.debounce'
+import throttle from 'lodash.throttle'
 import css from './autocomplete.css'
 import strings from '../strings'
 import { LocationMarker, Loading, Search as SearchIcon } from '../icons'
@@ -19,7 +19,7 @@ export default ({
   placeholder = strings.inputPlaceholder,
   value = '',
   autoFocus = false,
-  debounce: debounceWait = 200,
+  throttle: throttleWait = 200,
   onSelect: userOnSelectItem,
   onChange: userOnChange,
   onError: userOnError,
@@ -59,8 +59,8 @@ export default ({
     .catch(onError)
   }, [autocomplete])
 
-  const debouncedSearch = useCallback(
-    debounce(search, debounceWait, { trailing: true }),
+  const throttledSearch = useCallback(
+    throttle(search, throttleWait, { leading: true, trailing: true }),
     [search]
    )
 
@@ -88,7 +88,7 @@ export default ({
 
     if (searchOn.includes(type)) {
       setIsLoading(true)
-      debouncedSearch(term)
+      throttledSearch(term)
     }
   }
 

src/autocomplete/autocomplete.js

@@ -56,7 +56,7 @@ class GEAutocomplete extends HTMLElement {
       'api_key',
       'placeholder',
       'autofocus',
-      'debounce',
+      'throttle',
       'lang',
       'size',
       'value',
@@ -93,7 +93,7 @@ class GEAutocomplete extends HTMLElement {
       apiKey: this.getAttribute('api_key')?.trim(),
       placeholder: this.getAttribute('placeholder'),
       autoFocus: this.getAttribute('autofocus') !== null,
-      debounce: parseInt(this.getAttribute('debounce')),
+      throttle: parseInt(this.getAttribute('throttle')),
       value: this.value,
       params: compact({
         lang: this.getAttribute('lang'),