Question

在一个条目中，我使用onkeyup函数，以便每次键入该函数时，我都会激活一个javascript函数，该函数使用ajax向服务器发出请求，当用户快速键入时就会出现问题，因此，每个键他/她触摸，激活了一个ajax请求，这使我产生了很多请求，也给我带来了不好的结果。我不知道是否被理解，希望有人能给我一个如何改变这一点的想法。谢谢

Answer 1

这种ajax调用不是一个好主意。

反正

当用户至少键入 3-4个字母时，您应该进行ajax调用。
您还可以添加一些检查，以查看用户是否键入了某些内容并停止了书写，然后执行ajax。
如果您仍然想对每个字符进行ajax，则尝试做非常轻巧的ajax，这意味着从服务器获取非常少量数据。

检查输入长度是否> 3 ：

var userInput = $('#inputFiled').val();  // get user input  and save into js variable
if(userInput.length > 3){   //if user input is at least 3 characters
  //do ajax here
}

检查用户是否已停止书写

为此，您将必须使用underscore.js

$('#userInout').keyup(_.debounce(yourAjaxCallFunctionHere , 500)); 
underscorejs.org/#debounce

您还可以使用jQuery

var delayInAjaxCall = (function(){
      var timer = 0;
      return function(callback, milliseconds){
      clearTimeout (timer);
      timer = setTimeout(callback, milliseconds);
   };
})();

上述功能的使用

$('input').keyup(function() {
   delayInAjaxCall(function(){
   alert('Hi, func called');
   }, 1000 );
});

Answer 2

您可以利用下面的JS代码并用几行代码来实现，

let timer = null;

on_key_up(){

  //if input length < 3 return it

  if(timer){
    window.clearTimeout(timer);
    timer = null;
  }

  timer = window.setTimeout( ()=>{
   FireMyEvent()
  }, 1000);

}

onkeyup激活许多ajax请求

2 个答案: