JavaScript onKeyUp 时间延迟

Posted 2023-05-07

【中文标题】JavaScript onKeyUp 时间延迟

【英文标题】：JavaScript onKeyUp time delay

【发布时间】：2011-10-08 01:55:54

【问题描述】：

我需要一些关于我调用 onKeyUp 的 javascript 函数的帮助，它是一个 Ajax 函数，但每次我编写任何字符时它都会调用该函数并且它会降低页面性能并且它每次都会检查，这是一个用户检查数据库。

我试过了：

 var timer;
 function chk_me()

   clearTimeout(timer);
   timer=setTimeout(function validate()...,1000);

但我的验证函数有一个参数，所以我无法传递它，我这样调用函数：

<input type="text" name="usuario" id="usuario" class="required" onKeyUp="chk_me();" minlegth="4" value=/> 

对吗？我该怎么办？

这是我的第一个问题，希望大家理解

谢谢， 阿尔贝托

谢谢大家，因为我是新手，所以我无法在不同的答案中做到这一点，所以我用解决方案编辑了我的问题。 我找到了这个：http://bytes.com/topic/javascript/answers/451142-need-advice-acting-only-last-onkeyup-event-series 并使用最后一个答案方法并添加一些代码，我把代码留给你，就像它说它不是最好的方法但有效，所以如果你有其他方法，我会很感激并在这里使用它它是：

var keyCount = 0;
var timeoutCount = 0;

function handleKeyUp() // keyup handler

keyCount++;
setTimeout("compareCounts()", 500);


function compareCounts()

var usuario = document.profileForm.usuario.value;
timeoutCount++;
if (keyCount == timeoutCount)

xajax_checaUsuario(usuario);

所以我以这种方式接受 var 有什么建议可以让它变得更好吗？

谢谢

【问题讨论】：

您能否详细说明“页面性能变慢”？究竟是什么问题？打字很慢，与页面交互很慢？

嗯，它不会降低我错过的类型的性能，ajax 比 Javascript 慢，所以我会在按下每个键时显示它是否可用，当你虽然它可用时它可以显示你它不可用@mrtsherman 谢谢

jQuery .keyup() delay的可能重复

您正在寻找“去抖动器”。在各种情况下，这已在 SO 上多次回答。这是我不久前给出的一个例子：***.com/questions/5041548/…

我不能使用 jQuery，这是我的主要问题，我知道有了它，一切都会变得更容易

【参考方案1】：

不要将validate 直接传递给setTimeout，而是从匿名函数中调用它：

var timer;
function chk_me(arg) 
    clearTimeout(timer);
    timer = setTimeout(function () 
        validate(arg);
    , 1000);

【讨论】：

一开始我不明白，但后来我使用它，当它完美时，谢谢男人

【参考方案2】：

如果我正确理解了您的问题，我认为您想要的是将参数包含在闭包中：

var timer;
function chk_me(myparam) 

    clearTimeout(timer);
    var validate = function() 

       //do stuff with myparam
       var foo = myparam;

    
    timer=setTimeout(validate,1000);

和以前一样，计时器确保取消任何先前的调用，除非等待 1 秒，并且当您在 chk_me 范围内定义 validate 时，局部变量 myparam 将在其中可见，即使它的句柄已传递设置超时。

【参考方案3】：

您可以执行以下操作

var timer;
 function chk_me(myparam)

   clearTimeout(timer);
   timer=setTimeout(function validate()...,1000);
 

在 javascript 中，您可以访问定义函数的范围内的任何变量。下面是你如何使用它。

<input type="text" name="usuario" id="usuario" class="required" onKeyUp="chk_me('stringval');" minlegth="4" value=/>

【讨论】：

我已经尝试过了，但是每个 myparam 需要不同的 var

我找到了解决方案，我要做的是：var keyCount = 0; var timeoutCount = 0; function handleKeyUp() // keyup handler keyCount++; setTimeout("compareCounts()", 500); function compareCounts() var user = document.profileForm.usuario.value; timeoutCount++; if (keyCount == timeoutCount) //my process 所以我取那个特定字段的值无论如何谢谢@Zoidberg，我认为这不是最好的方法，但这对我有用

@Zoidberg - setTimeout 无法将参数传递给您指定的函数，因此您在答案中所做的方式将不起作用。您可以向它传递一个函数，该函数又调用带有参数的第二个函数：请参阅 gilly3 的答案。

@nnnnn 是的，对不起，小错字...我不是故意把它放在第二个函数的签名中。