时间戳

首页 > 解决方案 > onkeyup 激活许多 ajax 请求

javascript - onkeyup 激活许多 ajax 请求

问题描述

在一个条目中，我使用 onkeyup 函数，因此每次键入时，我都会激活一个 javascript 函数，该函数使用 ajax 向服务器发出请求，当用户快速键入时会出现问题，因此他/她触摸的每个键，激活了一个 ajax 请求，这导致了我很多请求，也给我带来了不好的结果。不知道有没有看懂，希望有人能给我一个思路如何改这个。谢谢

标签： javascriptjqueryajaxlaravel

解决方案

这种 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 );
});

推荐阅读