时间戳

首页 > 解决方案 > Django - AJAX Fetch 为每个输入字母发送请求

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

问题描述

这可能远非应该如何完成，我在旅途中学习，这是我第一次尝试这样的事情。

问题：即使使用 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);
        }

视图.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)

标签： javascriptdjangoajax

解决方案

将超时 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);
        }

推荐阅读