Django - AJAX Fetch 发送每个输入字母的请求

Question

这可能与应有的方式相去甚远，我正在不断学习，这是我第一次尝试这样的事情。

问题：即使使用 setTimeout 函数，服务器也会为我写的每个字母发送响应，尽管我希望它等待用户停止键入并只获取完成的单词

我的模板中的脚本：

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 1

将超时 ID 存储到高于您的事件监听器范围内的变量。当事件触发时 - 检查是否超时并清除它（这意味着如果尚未执行则取消请求）例子：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);        }