Django – AJAX Fetch sends request for each input letter

Tags: , ,



This might be far from how it should be done, I’m learning on the go and it’s my first time trying something like this.

Problem: Even with the setTimeout function, server sends response for each letter I have written, though I would expect it to wait for user to stop typing and just fetch the finished word(s)

Script in my template:

lookup.addEventListener('keyup', e => {
    
    let searchValue = e.target.value;

    if (searchValue.length > 4){

      setTimeout(() => {
     
        fetch(`{% url 'find_book' %}?param=${e.target.value}` )
          .then(res => res.json())
          .then(data => console.log(data))
          .catch(err => console.log(err))}, 2000);
        }

views.py

@api_view(['GET'])
def find_book(request):

    param = request.GET.get("param")

    if param:
        url = f'https://www.googleapis.com/books/v1/volumes?q=intitle:{param}&key=xxx'
        r = requests.get(url)
        
        if r.status_code == 200:
            data = r.json()
            return Response(data, status=status.HTTP_200_OK)
        else:
            return Response({"error": "Request failed"}, status=r.status_code)
    else:
        return Response({}, status=status.HTTP_200_OK)

Answer

Store timeout id to variable in the scope higher than yours event listner. When event fires up – check if there was a timeout and clear it (which means cancel the request if it wasn’t yet executed)

Example:

let delayedFetch;

lookup.addEventListener('keyup', e => {
    
    let searchValue = e.target.value;

    if (searchValue.length > 4){

      if (delayedFetch) clearTimeout(delayedFetch);

      delayedFetch = setTimeout(() => {
     
        fetch(`{% url 'find_book' %}?param=${e.target.value}` )
          .then(res => res.json())
          .then(data => console.log(data))
          .catch(err => console.log(err))}, 2000);
        }


Source: stackoverflow