Ajax가 너무 많은 요청을 내고 있습니다.

Question

따라서 사용자가 .search 필드에 3 초 동안 입력을 중단 할 때마다 데이터를 페이지 getData.php으로 전송해야하는 곳에서 코드를 작성했습니다. 하지만 사용자 유형이 더 느리다고 (1 초당 1 문자와 같이) 또는 약 1 초 후에 타이핑을 시작하면 각 문자를 더 많은 Ajax 요청 (많은 문자 수에 따라 약 15/20)으로 보냅니다. 오히려 전체 단어에 대한 1 요청.

이 내 코드입니다 : EDIT FOR BETTER UNDERSTANDING

---

$(".search").on('input', function() { 
    $(".search").keyup(function() { 
     timer = setTimeout(function() { 

      $.ajax({ 
       type: "POST", 
       url: "getData.php", 
       data: {search: $(".search").val()} 
      }).done(function(data) { 
       $(".searchReturn").text(data); 
       $(".loading").hide(); 
      }); 

      $(".searchReturn").fadeIn(750); 

     }, 3000); 

     $(".search").keydown(function() { 
      clearTimeout(timer); 
     }); 

     $(".loading").fadeIn(250); 
    }); 

    $(".searchReturn").hide() 
}); 

내가 필드에 "테스트"를 입력 한 말, 그때는 "테스트"를 다시 1 초 후 가진 "testtest"을 입력했습니다. 내가 이것을했을 때 나는 55 개의 Ajax POST를 얻었다. 나는 이것이 어떻게되는 것을 멈추게 할 것인가를 묻고있다.

Answer 1

add clearTimeout (timer); in keyup handler

$(".search").on('input', function() { 
    $(".search").keyup(function() { 
     clearTimeout(timer); 
     timer = setTimeout(function() { 

      $.ajax({ 
       type: "POST", 
       url: "getData.php", 
       data: {search: $(".search").val()} 
      }).done(function(data) { 
       $(".searchReturn").text(data); 
       $(".loading").hide(); 
      }); 

      $(".searchReturn").fadeIn(750); 

     }, 3000); 


     $(".loading").fadeIn(250); 
    }); 

    $(".searchReturn").hide(); 
});