Question

我有一个输入文本框供人们输入用户名，它附加了一个onkeyup事件属性，它会触发一个AJAX请求以检查用户名是否被占用。

第一个键与第二个键之间的延迟是多少？这意味着如果我在一个字母后面输入一个5个字母的单词。 AJAX会激活5次吗？
如果没有延迟，这是否会“计算成本”，因为有太多的数据库查询？或者没有明显的区别？
如果性能存在差异，我可以使用Javascript检查用户是否实际“完成”输入。我仍然希望它在打字后自动检查。因此排除onblur属性等

我的代码：http://pastebin.com/hXfgk7nL
（代码缩进在堆栈溢出时对我不起作用）

Answer 1

是的，每当您输入一个角色时，它都会触发您，并且您在页面效果方面不会喜欢这样。如果您愿意，可以在执行回调时实施延迟。在用户停止输入之前不会执行它。这是一个例子：

           $(document).ready(function(){
                $('#txtboxid').keyup(function(){
                 clearTimeout(timer); 
                 timer = setTimeout(function(){ 
                      //call your function here
               }, 250) // you can change the 250 here to a higher number if you want the delay to be longer. In this case, 250 means a quarter of a second.
        });});

Answer 2

是的，它会多次触发，每次按键一次。您正在触发多个AJAX调用，因此您在浪费网络和服务器资源。

此外，您无法保证呼叫将返回的顺序，因此，如果由于某些网络原因，最后一次发出的呼叫返回，它将覆盖最近请求的结果。

要解决这个问题，您正在寻找类似此插件的内容：https://github.com/cowboy/jquery-throttle-debounce。

从插件使用示例：

function ajax_lookup( event ) {
  // Perform an AJAX lookup on $(this).val();
};

// Console logging happens on keyup, for every single key
// pressed, which is WAAAY more often than you want it to.
$('input:text').keyup( ajax_lookup );

// Console logging happens on window keyup, but only after
// the user has stopped typing for 250ms.
$('input:text').keyup( $.debounce( 250, ajax_lookup ) );

请注意，尽管名称可以单独使用，但没有jquery。

Answer 3

以下是我对您的查询的回复/建议：

是的，它将触发5个五，因为将触发5次按键事件。
这将是性能问题，导致服务器响应缓慢，因为您按顺序发出多个ajax请求，每个请求的响应可能不是顺序的。您的代码将受到逻辑问题的影响。
而不是对key-up进行ajax调用，您可以将其用于blur事件。

建议：在进行ajax调用之前，请在字段中验证基本错误，如空字符串，数字等，（取决于您的要求）。

Answer 4

是的，它会开火。如果你不需要那种方法，你必须用旗帜检查条件。使用存储在变量中的先前值检查给定值。

Answer 5

您可以尝试检查输入是否在500毫秒内被修改。是不是，然后使只有一个 ajax请求。如果输入再次被修改，则必须再次重复该过程。

我建议使用setInterval。

Answer 6

是的，它会触发每个关键事件。您可以使用以下方法降低性能。

我相信您必须拥有用户名的最小字符长度。等到用户输入该字符数才能查询数据库。
您始终可以将所有用户名以用户输入的用户名开头，并在本地内存中处理。这可能不是实时的，但会减少数据库查询的数量。此外，它还取决于您当前用户列表的大小。
在将用户名保存到数据库之前，请仔细检查是否存在用户名。

onkeyup事件触发延迟

6 个答案: