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);

        }